ASP.NET MVC网络上传器实现上传功能

这个例子分享了安卓九宫格图片显示的具体代码，供大家参考。具体内容如下

1.简介：WebUploader是百度WebFE(FEX)团队开发的一款简单的现代文件上传组件，主要基于HTML5，辅以FLASH。HTML5的优势在现代浏览器中可以得到充分发挥，而主流IE浏览器并没有被抛弃，使用了原有的FLASH运行时，兼容IE6、IOS6和安卓4。两套运行时，同样的调用模式，用户可以随意使用。

2.引入资源：使用Web Uploader上传文件需要引入三种资源：JS、CSS、SWF。

！-介绍CSS-link rel='样式表' type=' text/CSS ' href=' web uploader文件夹/webuploader.css '！-介绍js-script type=' text/JavaScript ' src=' http : web uploader文件夹/webuploader.js'/script！-在初始化期间指定了SWF，稍后将显示-3.HTML。

div id=' uploader ' class=' Wu-example '！-用于存储文件信息-ul id=' the list ' class=' list-group '/ul div class=' uploader-list '/div class=' btns ' div id=' picker ' style=' float 3360 left；'选择文件/div输入id=' CTL BTN ' type=' button ' value=' start uploading ' class=' BTN BTN-default ' style=' width :78 px；高度：37 px；边距-left :10 px；'//div/div4。JS部分

//初始化上传控件函数init upload(){ var $=jQuery；var $ list=$(' # the list ')；var uploader=webuploader。创建({//选完文件后，是否自动上传auto: false，//swf文件路径swf:应用程序路径'./内容/脚本/插件/网络上传程序/上传程序。swf '，//文件接收服务端服务器：应用程序路径"公共信息管理/上传/上传",//选择文件的按钮。可选。 //内部根据当前运行是创建，可能是投入元素，也可能是闪光pick: '#picker '，chunked: true，//开始分片上传chunkSize: 2048000，//每一片的大小formData: { guid: GUID //自定义参数，待会儿解释}, //不压缩图像，默认如果是jpeg，文件上传前会压缩一把再上传！resize : false })；//当有文件被添加进队列的时候上传程序. on('文件排队'，函数（文件){ $ list。追加(' Li id='文件。id ' ' class=' list-group-item ' ' ' span class=' fileName ' DataValue=' file。name/span ' ' span class=' state ' style=\ ' margin-left : 10px；\'等待上传/span ' ' span class='文件路径' DataValue=' 0 ' style=\ ' margin-left : 10px；显示器：无；\ '/span ' ' span class=' download ' style=' margin-left :20 px；/span ' ' span class=' webuploadDelbtn ' style=\ ' float : right；显示器：无；\'删除span ' '/Li ')；});//文件上传过程中创建进度条实时显示uploader.on('uploadProgress '，函数（文件，百分比){ var $li=$('#' file.id)，$percent=$li.find(' .进步。进度条');//避免重复创建if(！百分之美元。长度){ $ percent=$(' div class='进度-分条活动' ' ' div class='进度条'角色='进度条'样式='宽度： 0% ' ' '/div ' '/div ').附录(李).查找('。进度条');} $li.find('span.state ').文本('上传中');$percent.css('width '，percent * 100 ' % ')；});//文件上传成功，给项目添加成功同学们，用样式标记上传成功uploader.on('uploadSuccess '，函数（文件，响应){ var $ Li=$(' # '文件。id)；//$(“#”文件。id ).查找(“p.state”).文本('已上传');$.' post('././publiinfomanage/Upload/Merge '，{ guid: GUID，fileName: file.name }，函数（数据){ $li.find('span.state ').html(")上传成功');$li.find('span.filepath ').attr('dataValue '，1)；$li.find('span.fileName ').attr('dataValue '，数据。文件名)；$li.find('span.fileName ').html(数据。文件名)；$li.find('span.download ').html('a href=\ '././publiinfomanage/上传/下载文件？文件路径='数据。文件路径'文件名='数据。文件名' \ '下载/a ')$李。查找(' span。webuploaddelbtn ').show()；$li.find('span.filepath ').html(数据。文件路径)；//增加列表存储files.push(数据);});});//文件上传失败，显示上传出错uploader.on('uploadError '，函数（文件，原因){ $(“#”file . id).查找(“p.state”).文字（原因);});//完成上传完了，成功或者失败，先删除进度条uploader.on('uploadComplete '，函数（文件){ $(“#”file . id).查找('。进步")。淡出()；});//所有文件上传完毕uploader.on('uploadFinished '，function () { //提交表单});//开始上传$('#ctlBtn ').点击(function(){ uploader。上传()；});//删除$list.on('单击',')。webuploadDelbtn '，function(){ debugger var $ ele=$(this)；var id=$ele.parent().attr(' id ')；var file=uploader。GetFile(id)；uploader.removeFile(文件);$ele.parent().移除();//移除数组var dest file=查找文件(文件。名称)var index=files。indexof(目标文件)；if (index -1) { files.splice(index，1)；} });}5.C#控制器后台处理

///摘要///上传文件////summary////returns/returns[httpset]公共操作结果Upload(){ string fileName=Request[' name ']；int lastIndex=fileName .LastIndexOf(' . ');字符串fileRelName=lastIndex==-1？文件名：文件名。子字符串(0,文件名. LastIndexOf(' . '));文件名称=文件名称。替换('[',' ')。替换(']',' ')。替换(' { ',' ')。替换(' } ',' ')。替换(',',' ');整数索引=转换. ToInt32(请求['区块']);//当前分块序号var guid=请求[' guid ']；//前端传来的全局唯一标识符号变量目录=服务器. MapPath(' ~/Upload/file ')；//文件上传目录字符串当前时间=日期时间.现在。ToString(' yyyy-MM-DD ')；dir=' \ \ ' currentTime目录=路径。组合（目录、文件名称);//临时保存分块的目录if(！系统IO。目录。存在(目录))系统。目录创建目录；字符串文件路径=路径。合并（目录，索引. ToString())；//分块文件名为索引名，更严谨一些可以加上是否存在的判断，防止多线程时并发冲突变量数据=请求。文件[' file ']；//表单中取得分块文件//if(数据！=null)//为空可能是暂停的那一瞬间//{数据。另存为（文件路径);//报错//}返回JSON(new { erron=0 })；//演示，随便返回了个值，请勿参考}6.实现效果

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