swupload多图片上传Asp.net MVC

2021-06-20 00:04

阅读:750

标签:服务   css   efi   let   picker   one   upload   地址   ogr   

1. 下载WebUploader

2. 将下载到的压缩包里面的文件复制到自己的项目中   

3. 添加引用

技术分享
1 
2 
3 
4 
5 
6 
技术分享

4.准备一个放图片的容器和一个上传按钮

5.创建Web Uploader实例并监听事件

技术分享
  1 
‘ 42 ), 43 $img = $li.find(‘img‘); 44 45 46 // $list为容器jQuery实例 47 $list.append($li); 48 49 // 创建缩略图 50 // 如果为非图片文件,可以不用调用此方法。 51 // thumbnailWidth x thumbnailHeight 为 100 x 100 52 uploader.makeThumb(file, function (error, src) { 53 if (error) { 54 $img.replaceWith(‘不能预览‘); 55 return; 56 } 57 58 $img.attr(‘src‘, src); 59 }, thumbnailWidth, thumbnailHeight); 60 }); 61 62 // 文件上传过程中创建进度条实时显示。 63 uploader.on(‘uploadProgress‘, function (file, percentage) { 64 var $li = $(‘#‘ + file.id), 65 $percent = $li.find(‘.progress span‘); 66 67 // 避免重复创建 68 if (!$percent.length) { 69 $percent = $(‘

‘) 70 .appendTo($li) 71 .find(‘span‘); 72 } 73 74 $percent.css(‘width‘, percentage * 100 + ‘%‘); 75 }); 76 77 // 文件上传成功,给item添加成功class, 用样式标记上传成功。 78 uploader.on(‘uploadSuccess‘, function (file, response) { 79 80 $(‘#‘ + file.id).addClass(‘upload-state-done‘); 81 }); 82 83 // 文件上传失败,显示上传出错。 84 uploader.on(‘uploadError‘, function (file) { 85 var $li = $(‘#‘ + file.id), 86 $error = $li.find(‘div.error‘); 87 88 // 避免重复创建 89 if (!$error.length) { 90 $error = $(‘
‘).appendTo($li); 91 } 92 93 $error.text(‘上传失败‘); 94 }); 95 96 // 完成上传完了,成功或者失败,先删除进度条。 97 uploader.on(‘uploadComplete‘, function (file) { 98 $(‘#‘ + file.id).find(‘.progress‘).remove(); 99 }); 100 101 //所有文件上传完毕 102 uploader.on("uploadFinished", function () 103 { 104 //提交表单 105 106 }); 107 108 //开始上传 109 $("#ctlBtn").click(function () { 110 uploader.upload(); 111 112 }); 113 114 //显示删除按钮 115 $(".cp_img").live("mouseover", function () 116 { 117 $(this).children(".cp_img_jian").css(‘display‘, ‘block‘); 118 119 }); 120 //隐藏删除按钮 121 $(".cp_img").live("mouseout", function () { 122 $(this).children(".cp_img_jian").css(‘display‘, ‘none‘); 123 124 }); 125 //执行删除方法 126 $list.on("click", ".cp_img_jian", function () 127 { 128 var Id = $(this).parent().attr("id"); 129 uploader.removeFile(uploader.getFile(Id,true)); 130 $(this).parent().remove(); 131 }); 132 133 }); 134 135 136
技术分享

6 在Controller里新建一个Action用于保存图片并返回图片路径(这方法是 eflay 前辈博客上说的)

技术分享
 1  public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
 2         {
 3             string filePathName = string.Empty;
 4 
 5             string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload");
 6             if (Request.Files.Count == 0)
 7             {
 8                 return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
 9             }
10 
11             string ex = Path.GetExtension(file.FileName);
12             filePathName = Guid.NewGuid().ToString("N") + ex;
13             if (!System.IO.Directory.Exists(localPath))
14             {
15                 System.IO.Directory.CreateDirectory(localPath);
16             }
17             file.SaveAs(Path.Combine(localPath, filePathName));
18 
19             return Json(new
20             {
21                 jsonrpc = "2.0",
22                 id = id,
23                 filePath = "/Upload/" + filePathName
24             });
25         
26         }
技术分享

这样就大功告成了。由于是第一次写博客,里面如果有写的不详细或不对的地方,欢迎大家指点。希望能和大家一起进步。

Demo下载地址http://pan.baidu.com/s/1hqqvB0o

swupload多图片上传Asp.net MVC

标签:服务   css   efi   let   picker   one   upload   地址   ogr   

原文地址:http://www.cnblogs.com/gdsblog/p/7191069.html


评论


亲,登录后才可以留言!