jQuery無刷新上傳之uploadify簡單試用
先簡單的侃兩句：貌似已經有兩個月的時間沒有寫過文章了，不過仍會像以前那样每天至少有一至兩個小時是泡在园子裏看各位大神的文章。前些天在研究“ajax無刷新上傳”方面的一些插件，用SWFUpload實現了無刷新上傳的功能，不過個人覺得不是很完美。
昨天在網上找到了一個叫做uploadify的jquery上傳插件，看到园子裏有幾篇文章也是介紹這個插件的，心想何不用這個試試。
不過园子裏的這幾篇文章用到的uploadify還是以前的舊版本uploadify-v2.1.0，我在官網上下載的是uploadify-v3.1版，其中的一些参數以及調用方法也不同了，還好官網有幫助文檔。
（唯一感覺不爽的一點就是這個開發包是針對php的，官網並沒有.NET版本，但至少原理都是一样的，簡單的修改一下就可以了。還是那句話“不僅要知其然，還要知其所以然”，知其所以然了，一切都是浮雲啊）
好了，廢話不多說。先上個效果圖，有圖有真相：
一：從官網下載開發包添加到項目中，我對這個開發包做了一個精簡，刪去了那些php方面的文件：
項目基本結構：
二：添加對css和js文件的引用：
注意jquery.js文件和uploadify.js文件的調用順序。
三：Default.aspx頁面的代碼如下：
<head runat="server">
<title></title>
<link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="js/uploadify/jquery.uploadify-3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#uploadify").uploadify({
//指定swf文件
'swf': 'js/uploadify/uploadify.swf',
//後台處理的頁面
'uploader': 'UploadHandler.ashx',
//按鈕顯示的文字
'buttonText': '上傳圖片',
//顯示的高度和寬度，默認 height 30；width 120
//'height': 15,
//'width': 80,
//上傳文件的類型 默認为所有文件 'All Files' ; '*.*'
//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'fileTypeDesc': 'Image Files',
//允許上傳的文件後綴
'fileTypeExts': '*.gif; *.jpg; *.png',
//發送给後台的其他参數通過formData指定
//'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
//上傳文件頁面中，你想要用來作为文件隊列的元素的id, 默認为false 自動生成, 不帶#
//'queueID': 'fileQueue',
//選擇文件後自動上傳
'auto': true,
//設置为true將允許多文件上傳
'multi': true
});
});
</script>
</head>
<body>
<div>
<%--用來作为文件隊列區域--%>
<div id="fileQueue">
</div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadify('upload')">上傳</a>|
<a href="javascript:$('#uploadify').uploadify('cancel')">取消上傳</a>
</p>
</div>
</body>
</html>
四：一般處理程序UploadHandler.ashx簡單代碼如下：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//http://go.rritw.com/www.cnblogs.com/babycool/
//接收上傳後的文件
HttpPostedFile file = context.Request.Files["Filedata"];
//其他参數
//string somekey = context.Request["someKey"];
//string other = context.Request["someOtherKey"];
//獲取文件的保存路徑
string uploadPath =
HttpContext.Current.Server.MapPath("UploadImages" + "\\");
//判斷上傳的文件是否为空
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
//保存文件
file.SaveAs(uploadPath + file.FileName);
context.Response.Write("1");
}
else
{
context.Response.Write("0");
} } public bool IsReusable
{
get
{
return false;
}
}
五：用到的参數介紹：
通過查看jquery.uploadify-3.1.js中的默認設置並参考官方文檔可得知：
参數不重新指定則保持默認：
swf：uploadify.swf 文件的相對路徑
uploader：後台處理程序的相對路徑
buttonText：按鈕顯示的文字
上傳文件的類型默認为所有文件 'All Files' '*.*'
可以通過以下兩参數指定，指定方法見步驟三中的代碼：
fileTypeDesc；fileTypeExts；
auto：为true表示選擇文件後自動上傳；如果不想自動上傳，需設定为false，並通過
1 <a href="javascript:$('#uploadify').uploadify('upload')">上傳</a>|
2 <a href="javascript:$('#uploadify').uploadify('cancel')">取消上傳</a>
來指定是上傳還是取消上傳；
multi：設置为true將允許多文件上傳；
method： 提交方式Post 或Get 默認为Post；
queueSizeLimit：當允許多文件上傳時，設置選擇文件的個數，默認值为999 ；
另外，取消上傳圖片的路徑是設置在css文件中的；
其他更多設置可以参考官網的幫助文檔。
還有一個需要注意的一點是：一般在設定了選擇上傳文件路徑時比如只允許上傳*.jpg;*.png;*.gif格式的圖片文件，則除了指定fileTypeDesc；fileTypeExts；兩個参數外，還要在服務器端即一般處理程序中再次對上傳文件的文件擴展名進行判斷，以防一些用戶跳過客戶端驗證上傳惡意文件。
下面附上我在博客园找到的那兩篇介紹uploadify的文章鏈接，供大家参考：
並附上uploadify的官方網站
我整理的開發包：整理uploadify-v3.1.NET開發包
當然，這僅僅是一個簡單的試用，具體用到項目中還要考慮很多方面的問題。
歡迎各位大神多多指教，如果該文章對你有幫助大家可以一起討論討論。
轉載請注明出處。
jQuery無刷新上傳之uploadify簡單試用的更多相关文章
- jQuery无刷新上传之uploadify简单试用
先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...
- jQuery无刷新上传之uploadify
引自 文章 http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html 将文章里的代码整合在了一个解决方案里,直接可以下载测试,上代 ...
- ASP.NET MVC使用jQuery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- jQuery无刷新上传学习心得
记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...
- jquery 无刷新上传的小function
function zll_up(click_id,up_url,text_id,show_id){ this.create = function(){} //当点击指定元素时,创建iframe for ...
- ThinkPHP3.2.2 无刷新上传插件uploadify 使用
一. 在控制器中写一个方法,用于上传 public function upload(){ if (!empty($_FILES)) { //图片上传设置 $config = array( 'maxSi ...
- Jquery无刷新上传单个文件
function ajax_photo(photo_type){ $(document).on('change','#sitephoto',function(){ ...
- C#_Jquery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- 將UNITY作品上傳到Facebook App！
前言 大家好,今天要來介紹如何用UNITY 將製作好的遊戲上傳到Facebook,也就是Facebook App.近期Facebook與Unity合作而推出了新的插件,利用插件可上傳分數.邀請好友.P ...
随机推荐
- redis 其他特性
1.消息订阅与发布 subscribe my1 订阅频道 psubscribe my1* 批量订阅频道,订阅以my1开头的所有频道 publish my1 hello 在指定频道中发布消息,返回值为接 ...
- 用 vue cli 脚手架搭建单页面 Vue 应用（进阶2）
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- 「 Luogu P1379 」 八数码难题
# 解题思路 这题不难,主要就是考虑如何判重,如果直接在 $9$ 个位置上都比较一遍的话.你会得到下面的好成绩 所以考虑另一种方法: 将九个位置压成一个整数,并且因为只有九个数,所以不会超出 $int ...
- IDEA使用properties配置文件进行mysql数据路连接
1. 新建一个web项目(过程不需要教了吧,所以就省略啦) 2. 右键点击新建的项目名,选择创建文件目录(Directory),一般properties文件夹命名应为resoures; 3.右键点击新 ...
- 解决mysql时区问题以及SSL问题
看了下网上的教程,觉得都太麻烦啦,这里推荐个简单的! 解决时区问题 只需要加上serverTimezone=UTC即可,如下: spring.datasource.url=jdbc:mysql://1 ...
- [Python3网络爬虫开发实战] 1.4.3-Redis的安装
Redis是一个基于内存的高效的非关系型数据库,本节中我们来了解一下它在各个平台的安装过程. 1. 相关链接 官方网站:https://redis.io 官方文档:https://redis.io/d ...
- 每日命令：（12）sar
sar(System Activity Reporter系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告, 包括:文件的读写情况.系统调用的使用 ...
- LeetCode（47）Permutations II
题目 Given a collection of numbers that might contain duplicates, return all possible unique permutati ...
- 集训第六周 数学概念与方法 UVA 11181 条件概率
http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18546 题意:有n个人会去超市,其中只有r个人会买东西,每个人独自买东西的概 ...
- 集训第四周（高效算法设计）N题 (二分查找优化题)
原题:poj3061 题意:给你一个数s,再给出一个数组,要求你从中选出m个连续的数,m越小越好,且这m个数之和不小于s 这是一个二分查找优化题,那么区间是什么呢?当然是从1到数组长度了.比如数组长度 ...