本文实例为大家分享了swupload实现多图片上传的具体代码,供大家参考,具体内容如下
1. 下载WebUploader
2. 将下载到的压缩包里面的文件复制到自己的项目中
3. 添加引用
<!--引入Jquery--> <script src=~/Script/jquery-1.8.2.min.js></script> <!--引入Css--> <link href=~/CSS/webuploader.css rel=stylesheet /> <!--引入Js--> <script src=~/Script/webuploader.js></script>
4.准备一个放图片的容器和一个上传按钮
<p id=fileList></p> <!--这是存放图片的容器--> <p class=cp_img_jia id=filePicker></p> <!--这是上传按钮-->
5.创建Web Uploader实例并监听事件
<script type=text/javascript> var applicationPath = window.applicationPath === ? : window.applicationPath || ../../; $(function () { var $ = jQuery, $list = $('#fileList'), // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 90 * ratio, thumbnailHeight = 90 * ratio, // Web Uploader实例 uploader; uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: false, // swf文件路径 swf: applicationPath + '/Script/Uploader.swf', // 文件接收服务端。 server: applicationPath + '/Home/UpLoadProcess', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', //只允许选择图片 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 当有文件添加进来的时候 uploader.on('fileQueued', function (file) { var $li = $( '<p id=' + file.id + ' class=cp_img>' + '<img>' + '<p class=cp_img_jian></p></p>' ), $img = $li.find('img'); // $list为容器jQuery实例 $list.append($li); // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src', src); }, thumbnailWidth, thumbnailHeight); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); // 避免重复创建 if (!$percent.length) { $percent = $('<p class=progress><span></span></p>') .appendTo($li) .find('span'); } $percent.css('width', percentage * 100 + '%'); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function (file, response) { $('#' + file.id).addClass('upload-state-done'); }); // 文件上传失败,显示上传出错。 uploader.on('uploadError', function (file) { var $li = $('#' + file.id), $error = $li.find('p.error'); // 避免重复创建 if (!$error.length) { $error = $('<p class=error></p>').appendTo($li); } $error.text('上传失败'); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').remove(); }); //所有文件上传完毕 uploader.on(uploadFinished, function () { //提交表单 }); //开始上传 $(#ctlBtn).click(function () { uploader.upload(); }); //显示删除按钮 $(.cp_img).live(mouseover, function () { $(this).children(.cp_img_jian).css('display', 'block'); }); //隐藏删除按钮 $(.cp_img).live(mouseout, function () { $(this).children(.cp_img_jian).css('display', 'none'); }); //执行删除方法 $list.on(click, .cp_img_jian, function () { var Id = $(this).parent().attr(id); uploader.removeFile(uploader.getFile(Id,true)); $(this).parent().remove(); }); }); </script>
6 在Controller里新建一个Action用于保存图片并返回图片路径(这方法是 eflay 前辈博客上说的)
public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file) { string filePathName = string.Empty; string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, Upload); if (Request.Files.Count == 0) { return Json(new { jsonrpc = 2.0, error = new { code = 102, message = 保存失败 }, id = id }); } string ex = Path.GetExtension(file.FileName); filePathName = Guid.NewGuid().ToString(N) + ex; if (!System.IO.Directory.Exists(localPath)) { System.IO.Directory.CreateDirectory(localPath); } file.SaveAs(Path.Combine(localPath, filePathName)); return Json(new { jsonrpc = 2.0, id = id, filePath = /Upload/ + filePathName }); }
这样就大功告成了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。