ASP.NET多文件上传控件Uploadify的使用方法
程序员文章站
2023-12-17 17:40:22
对于uploadify文件上传之前已经讲过一次(文件上传~uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念...
对于uploadify文件上传之前已经讲过一次(文件上传~uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端uploadify是通过轮训的方式去调用我们的后台upload程序的,所以,对于多文件上传来说,也没什么稀奇的.
下面是文件上传后的缩略图如下
列表的组装使用js模板,这样对于复杂的html结构来说,可以减少拼写错误的出现,关闭是将li元素从ui元素移除,最后提交时,从ui里检查li元素,然后对它进行组装,并进行发送下面是相关代码
一 html模版
<script type="text/html" id="litemp"> <li> <!--上传后状态--> <div class="vediochange"> <dl> <dt> <a href="javascript:;"> <img width="140" height='92' src="{src}" alt="{alt}" /><span class="playicon"></span></a> <input type="hidden" name="hdfileurl" value="{filepath}" /><br /> <input type="hidden" name="hdimagepath" value="{imagepath}" /><br /> <input type="hidden" name="hdsourcename" value="{sourcename}" /><br /> <input type="hidden" name="hdfilesize" value="{filesize}" /><br /> </dt> <dd><a href="javascript:;" class="lookbig">预览</a> <a href="javascript:;" class="reselect" onclick="del(this)">关闭</a></dd> </dl> </div> <!--上传后状态--> </li> </script>
二 uploadfiy代码
<script type="text/javascript"> $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', 'script': 'uploadhandler.ashx', 'cancelimg': 'js/jquery.uploadify-v2.1.4/cancel.png', 'folder': '/uploadfile/', 'queueid': 'filequeue', 'auto': true, 'multi': true, 'oncomplete': function (event, queueid, fileobj, response, data) {//当单个文件上传完成后触发 //event:事件对象(the event object) //id:该文件在文件队列中的唯一表示 //fileobj:选中文件的对象,他包含的属性列表 //[name] - 已上传文件的名称 //[filepath] - 已上传文件在服务器上的路径 //[size] – 文件的大学,单位为字节 //[creationdate] – 文件的创建日期 //[modificationdate] – 文件的最后修改日期 //[type] – 文件的扩展名,以‘.'开始 //response:服务器端返回的response文本,我这里返回的是处理过的文件名称 //data:文件队列详细信息和文件上传的一般数据 $("#preview").append(datatemplate($("#litemp").text(), { src: response, alt: fileobj.name })); }, 'onerror': function (event, queueid, fileobj) {//当单个文件上传出错时触发 alert("文件:" + fileobj.name + " 上传失败!"); }, }); }); function del(o) { $(o).closest("li").remove(); } </script>
三 html代码
<div class="rt"> <ul class="clearfix w_vediochange" id="preview"> </ul> </div> <div id="filequeue"></div>
四 ashx代码
/// <summary> /// summary description for uploadhandler /// </summary> public class uploadhandler : ihttphandler { public void processrequest(httpcontext context) { context.response.contenttype = "text/plain"; context.response.charset = "utf-8"; httppostedfile file = context.request.files["filedata"]; string uploadpath = httpcontext.current.server.mappath(@context.request["folder"]); if (file != null) { if (!directory.exists(uploadpath)) { directory.createdirectory(uploadpath); } file.saveas(path.combine(uploadpath, file.filename)); var patharr = uploadpath.split('\\'); context.response.write(httpcontext.current.request.url.scheme + "://" + httpcontext.current.request.url.authority + "/" + patharr[patharr.length - 2] + "/" + patharr[patharr.length - 1] + "/" + file.filename); } else { context.response.write("0"); } } public bool isreusable { get { return false; } } }
为大家推荐一个专题,供大家学习:《asp.net文件上传汇总》
本实例只是简单的说明了文件上传的功能,如果在真实项目中使用的话,还需要进一步的进行代码的设计.
推荐阅读
-
ASP.NET文件上传控件Uploadify的使用方法
-
ASP.NET多文件上传控件Uploadify的使用方法
-
ASP.NET MVC4 利用uploadify.js多文件上传
-
Jquery Uploadify多文件上传带进度条且传递自己的参数
-
在ASP.NET中实现多文件上传的方法
-
ASP.NET Core单文件和多文件上传并保存到服务端的方法
-
详解jQuery uploadify文件上传插件的使用方法
-
ASP.NET MVC4 利用uploadify.js多文件上传
-
详解jQuery uploadify文件上传插件的使用方法
-
ASP.NET Core单文件和多文件上传并保存到服务端的方法