上傳圖片的兩種方法（ajaxFileUpload和webuploader）

時間 2019-11-29

標籤上傳圖片兩種方法 ajaxfileupload webuploader 欄目 Ajax 简体版

原文原文鏈接

上傳圖片的兩種方法javascript

一、ajaxFileUpload上傳圖片css

　　第一步：先引入jQuery與ajaxFileUpload插件。html

　　ajaxFileUpload插件下載地址：http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rarjava

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/ajaxfileupload.js"></script>

　　第二步：HTML代碼jquery

<body>
    <input type="file" id="file1" name="file" />
    <input type="button" value="上傳" />
</body>

　　第三步：JS代碼web

 1 <script type="text/javascript">
 2         $(function () {
 3             $(":button").click(function () {
 4                 if ($("#file1").val().length > 0) {
 5                     ajaxFileUpload();
 6                 }
 7                 else {
 8                     alert("請選擇圖片");
 9                 }
10             })
11         })
12         function ajaxFileUpload() {
13             $.ajaxFileUpload
14             (
15                 {
16                     url: '/AjaxUpLoader/Upload', //用於文件上傳的服務器端請求地址
17                     secureuri: false, //通常設置爲false
18                     fileElementId: 'file1', //文件上傳空間的id屬性  <input type="file" id="file" name="file" />
19                     dataType: 'HTML', //返回值類型 通常設置爲json
20                     success: function (data, status)  //服務器成功響應處理函數
21                     {
22                         alert(data);
23                         if (typeof (data.error) != 'undefined') {
24                             if (data.error != '') {
25                                 alert(data.error);
26                             } else {
27                                 alert(data.msg);
28                             }
29                         }
30                     },
31                     error: function (data, status, e)//服務器響應失敗處理函數
32                     {
33                         alert(e);
34                     }
35                 }
36             )
37             return false;
38         }
39     </script>

　　第四步：後臺代碼ajax

 1 　　　　　public ActionResult Upload()
 2         {
 3             NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;
 4 
 5             HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
 6             string imgPath = "";
 7             if (hfc.Count > 0)
 8             {
 9                 imgPath = "/testUpload" + hfc[0].FileName;
10                 string PhysicalPath = Server.MapPath(imgPath);
11                 hfc[0].SaveAs(PhysicalPath);
12             }
13             //注意要寫好後面的第二第三個參數
14             return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath }, "text/html", JsonRequestBehavior.AllowGet);
15         }

　　最後上傳界面及圖片展現：json

二、webuploader上傳圖片api

　　第一步：先引入所需的插件。服務器

　　webuploader官網上下載地址：http://fex.baidu.com/webuploader/

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/webuploader.css" rel="stylesheet" />
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="~/Scripts/webuploader.js"></script>

　　第二步：HTML代碼

<div id="uploadimg">
         <div id="fileList" class="uploader-list"></div>
         <div id="imgPicker">選擇圖片</div>
</div>

　　第三步：JS代碼

 1 <script type="text/javascript">
 2     $(function () {
 3         /*init webuploader*/
 4         var $list = $("#thelist");   //這幾個初始化全局的百度文檔上沒說明，好蛋疼。  
 5         var $btn = $("#ctlBtn");   //開始上傳  
 6         var thumbnailWidth = 100;   //縮略圖高度和寬度 （單位是像素），當寬高度是0~1的時候，是按照百分比計算，具體能夠看api文檔  
 7         var thumbnailHeight = 100;
 8 
 9         var uploader = WebUploader.create({
10             auto: true, // 選完文件後，是否自動上傳   
11             swf: '/Scripts/Uploader.swf', // swf文件路徑   
12             server: '@Url.Action("Upload")', // 文件接收服務端   
13             pick: '#imgPicker', // 選擇文件的按鈕。可選   
14             // 只容許選擇圖片文件。   
15             accept: {
16                 title: 'Images',
17                 extensions: 'gif,jpg,jpeg,bmp,png',
18                 mimeTypes: 'image/*'
19             }
20         });
21 
22         // 當有文件添加進來的時候
23         uploader.on('fileQueued', function (file) {
24             var $li = $(
25                     '<div id="' + file.id + '" class="file-item thumbnail">' +
26                         '<img>' +
27                         '<div class="info">' + file.name + '</div>' +
28                     '</div>'
29                     ),
30                 $img = $li.find('img');
31 
32             $list.append($li);
33 
34             // 建立縮略圖
35             uploader.makeThumb(file, function (error, src) {
36                 if (error) {
37                     $img.replaceWith('<span>不能預覽</span>');
38                     return;
39                 }
40 
41                 $img.attr('src', src);
42             }, thumbnailWidth, thumbnailHeight);
43         });
44 
45         // 文件上傳過程當中建立進度條實時顯示。
46         uploader.on('uploadProgress', function (file, percentage) {
47             var $li = $('#' + file.id),
48                 $percent = $li.find('.progress span');
49 
50             // 避免重複建立
51             if (!$percent.length) {
52                 $percent = $('<p class="progress"><span></span></p>')
53                         .appendTo($li)
54                         .find('span');
55             }
56 
57             $percent.css('width', percentage * 100 + '%');
58         });
59 
60         // 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
61         uploader.on('uploadSuccess', function (file) {
62             $('#' + file.id).addClass('upload-state-done');
63         });
64 
65         // 文件上傳失敗，現實上傳出錯。
66         uploader.on('uploadError', function (file) {
67             var $li = $('#' + file.id),
68                 $error = $li.find('div.error');
69 
70             // 避免重複建立
71             if (!$error.length) {
72                 $error = $('<div class="error"></div>').appendTo($li);
73             }
74 
75             $error.text('上傳失敗');
76         });
77 
78         // 完成上傳完了，成功或者失敗，先刪除進度條。
79         uploader.on('uploadComplete', function (file) {
80             $('#' + file.id).find('.progress').remove();
81         });
82     });
83 </script>

　　第四步：控制器代碼

 1 [HttpPost]
 2         public ActionResult upload(HttpPostedFileBase file)
 3         {
 4             if (file != null && file.ContentLength > 0)
 5             {
 6                 string folderpath = "/UploadFile/";//上傳圖片的文件夾
 7                 if (!Directory.Exists(folderpath))
 8                 {
 9                     Directory.CreateDirectory(Server.MapPath(folderpath));
10                 }
11                 string ext1 = Path.GetExtension(file.FileName);
12                 if (ext1 != ".gif" && ext1 != ".jpg" && ext1 != ".jpeg" && ext1 != ".png")
13                 {
14                     return Json(new { statu = 201, msg = "文件格式不正確！" });
15                 }
16                 else
17                 {
18                     string name = DateTime.Now.ToString("yyyyMMddHHmmssff");
19                     string ext = Path.GetExtension(file.FileName);
20                     string downpath = folderpath + name + ext;
21                     string filepath = Server.MapPath(folderpath) + name + ext;
22                     file.SaveAs(filepath);
23                     return Json(new { statu = 200, src = downpath, id = name });
24                 }
25             }
26             else
27             {
28                 return Json(new { statu = 202, msg = "請上傳文件！" });
29             }
30 
31         }