ASP.NET MVC Webuploader实现上传功能
这篇文章主要为大家详细介绍了ASP.NET MVC Webuploader实现上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下
1.简介:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
2.引入资源:使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。
1 2 3 4 5 6 | <!--引入CSS--> < link rel = "stylesheet" type = "text/css" href = "webuploader文件夹/webuploader.css" > <!--引入JS--> < script type = "text/javascript" src = "webuploader文件夹/webuploader.js" ></ script > <!--SWF在初始化的时候指定,在后面将展示--> |
3.HTML部分
1 2 3 4 5 6 7 8 9 | < div id = "uploader" class = "wu-example" > <!--用来存放文件信息--> < ul id = "thelist" class = "list-group" ></ ul > < div class = "uploader-list" ></ div > < div class = "btns" > < div id = "picker" style = "float:left;" >选择文件</ div > < input id = "ctlBtn" type = "button" value = "开始上传" class = "btn btn-default" style = "width:78px;height:37px;margin-left:10px;" /> </ div > </ div > |
4.JS部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | //初始化上传控件 function initUpload() { var $ = jQuery; var $list = $( '#thelist' ); var uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: false , // swf文件路径 swf: applicationPath + '../Content/scripts/plugins/webuploader/Uploader.swf' , // 文件接收服务端。 server: applicationPath + 'PublicInfoManage/Upload/Upload' , // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker' , chunked: true , //开始分片上传 chunkSize: 2048000, //每一片的大小 formData: { guid: GUID //自定义参数,待会儿解释 }, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false }); // 当有文件被添加进队列的时候 uploader.on( 'fileQueued' , function (file) { $list.append( '<li id="' + file.id + '" class="list-group-item">' + '<span class="fileName" dataValue="">' + file.name + '</span>' + '<span class="state" style=\" margin-left: 10px;\">等待上传</span>' + '<span class="filepath" dataValue="0" style=\" margin-left: 10px;display: none;\"></span>' + '<span class="download" style="margin-left:20px;"></span>' + '<span class="webuploadDelbtn"style=\"float: right;display: none; \">删除<span>' + '</li>' ); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress' , function (file, percentage) { var $li = $( '#' + file.id), $percent = $li.find( '.progress .progress-bar' ); // 避免重复创建 if (!$percent.length) { $percent = $( '<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>' ).appendTo($li).find( '.progress-bar' ); } $li.find( 'span.state' ).text( '上传中' ); $percent.css( 'width' , percentage * 100 + '%' ); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess' , function (file, response) { var $li = $( '#' + file.id); //$('#' + file.id).find('p.state').text('已上传'); $.post( '../../PublicInfoManage/Upload/Merge' , { guid: GUID, fileName: file.name }, function (data) { $li.find( 'span.state' ).html("上传成功 "); $li.find('span.filepath').attr(" dataValue ", 1); $li.find('span.fileName').attr(" dataValue ", data.filename); $li.find('span.fileName').html(data.filename); $li.find('span.download').html(" <a href=\ "../../PublicInfoManage/Upload/DownFile?filePath=" + data.filepath + "&fileName=" + data.filename + "\">下载</a>" ) $li.find( 'span.webuploadDelbtn' ).show(); $li.find( 'span.filepath' ).html(data.filepath); //增加列表存储 files.push(data); }); }); // 文件上传失败,显示上传出错。 uploader.on( 'uploadError' , function (file, reason) { $( '#' + file.id).find( 'p.state' ).text(reason); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on( 'uploadComplete' , function (file) { $( '#' + file.id).find( '.progress' ).fadeOut(); }); //所有文件上传完毕 uploader.on( "uploadFinished" , function () { //提交表单 }); //开始上传 $( "#ctlBtn" ).click( function () { uploader.upload(); }); //删除 $list.on( "click" , ".webuploadDelbtn" , function () { debugger var $ele = $( this ); var id = $ele.parent().attr( "id" ); var file = uploader.getFile(id); uploader.removeFile(file); $ele.parent().remove(); //移除数组 var destFile = findFile(file.name) var index = files.indexOf(destFile); if (index > -1) { files.splice(index, 1); } }); } |
5.C# Controller后台处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /// <summary> /// 上传文件 /// </summary> /// <returns></returns> [HttpPost] public ActionResult Upload() { string fileName = Request[ "name" ]; int lastIndex = fileName.LastIndexOf( '.' ); string fileRelName = lastIndex == -1? fileName: fileName.Substring(0, fileName.LastIndexOf( '.' )); fileRelName = fileRelName.Replace( "[" , "" ).Replace( "]" , "" ).Replace( "{" , "" ).Replace( "}" , "" ).Replace( "," , "" ); int index = Convert.ToInt32(Request[ "chunk" ]); //当前分块序号 var guid = Request[ "guid" ]; //前端传来的GUID号 var dir = Server.MapPath( "~/Upload/file" ); //文件上传目录 string currentTime = DateTime.Now.ToString( "yyyy-MM-dd" ); dir += "\\" + currentTime; dir = Path.Combine(dir, fileRelName); //临时保存分块的目录 if (!System.IO.Directory.Exists(dir)) System.IO.Directory.CreateDirectory(dir); string filePath = Path.Combine(dir, index.ToString()); //分块文件名为索引名,更严谨一些可以加上是否存在的判断,防止多线程时并发冲突 var data = Request.Files[ "file" ]; //表单中取得分块文件 //if (data != null)//为null可能是暂停的那一瞬间 //{ data.SaveAs(filePath); //报错 //} return Json( new { erron = 0 }); //Demo,随便返回了个值,请勿参考 } |
6.实现效果
以上就是本文的全部内容,希望对大家的学习有所帮助