ASP.NET MVC Webuploader实现上传功能
程序员文章站
2023-12-03 16:36:28
本文实例为大家分享了android九宫格图片展示的具体代码,供大家参考,具体内容如下
1.简介:webuploader是由baidu webfe(fex)团队开发的一个简...
本文实例为大家分享了android九宫格图片展示的具体代码,供大家参考,具体内容如下
1.简介:webuploader是由baidu webfe(fex)团队开发的一个简单的以html5为主,flash为辅的现代文件上传组件。在现代的浏览器里面能充分发挥html5的优势,同时又不摒弃主流ie浏览器,沿用原来的flash运行时,兼容ie6+,ios 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
2.引入资源:使用web uploader文件上传需要引入三种资源:js, css, swf。
<!--引入css--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入js--> <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script> <!--swf在初始化的时候指定,在后面将展示-->
3.html部分
<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部分
//初始化上传控件 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后台处理
/// <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.实现效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: MySQL嵌套事务所遇到的问题
下一篇: mysql中的“money”类型说明