本文实例为人人分享了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 }); }
如许就功德圆满了。
以上就是关于Asp.net MVC怎样应用swupload来完成多图片上传的示例代码分享的细致内容,更多请关注ki4网别的相干文章!