jQuery无刷新上传之uploadify3.1简单使用

时间：2021-05-26

昨天在网上找到了一个叫做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://plete不能改成中文”，这可能是之前的版本不能进行修改。我通过查看源代码 jquery.uploadify-3.1.js找到了上传完成时显示的内容：

再参考官方的帮助文档，可以得知，在“
onUploadSuccess” 事件中可以设置上传完成后所执行的代码，则修改后的代码为：

//选择文件后自动上传'auto': true,//设置为true将允许多文件上传'multi': true,//上传成功后执行'onUploadSuccess': function (file, data, response) { $('#' + file.id).find('.data').html(' 上传完毕');}

还有一个需要注意的一点是：一般在设定了选择上传文件路径时比如只允许上传*.jpg;*.png;*.gif格式的图片文件，则除了指定fileTypeDesc；fileTypeExts；两个参数外，还要在服务器端即一般处理程序中再次对上传文件的文件扩展名进行判断，以防一些用户跳过客户端验证上传恶意文件。

下面附上我在博客园找到的那两篇介绍uploadify的文章链接，供大家参考：

Jquery uploadify上传插件使用详解

jQuery插件uploadify实现ajax效果的图片上传

并附上uploadify的官方网站

我整理的开发包：整理uploadify-v3.1.NET开发包

当然，这仅仅是一个简单的试用，具体用到项目中还要考虑很多方面的问题。

欢迎各位大神多多指教，如果该文章对你有帮助大家可以一起讨论讨论。

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章