jQuery无刷新上传之uploadify简单代码

时间：2021-05-26

先简单的侃两句：貌似已经有两个月的时间没有写过文章了，不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章。前些天在研究“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://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；两个参数外，还要在服务器端即一般处理程序中再次对上传文件的文件扩展名进行判断，以防一些用户跳过客户端验证上传恶意文件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

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

相关文章