web前端圖片上傳

圖片上傳有不少種形式，可是據說ios只能傳字符串，因此爲了安卓、ios和web能用一個接口上傳圖片，採用了基於base64 的方法上傳圖片。

下面是個人html

1 <div class="parn">
2     <h6>店鋪宣傳海報</h6>
3     <div class="img-div">
4           <img src="" class="add_img11" id="store_img">
5           <input type="file" class="files" onchange="updataimg(this)">
6           <div class="remarks">海報大小盡可能限制在1M之內</div>
7      </div>
8</div>

而後佈局的話，你們就隨意吧。最主要的就是img標籤用來顯示圖片，咱們這裏的原理是這樣的：先是圖片上傳，上傳成功以後，後臺給返回你上傳圖片的服務器地址，而後顯示在這個img標籤中。而後input是一個上傳的標籤，其中用updataimg這個函數來寫上傳的最主要的js代碼；

這裏是JS代碼

 1 function updataimg(fileObj){
 2                 var file_img = fileObj.files['0'];
 3                 //建立讀取文件的對象  
 4                 var reader = new FileReader();  
 5                 //建立文件讀取相關的變量  
 6                 var imgFile;  
 7                 //爲文件讀取成功設置事件  
 8                 reader.onload=function(e) {  
 9                     //alert('文件讀取完成');  
10                     imgFile = e.target.result;  //這裏就已是base64的格式了
11                     //console.log(imgFile); 
12                     var newsIndex = imgFile.indexOf(",");
13                     var news = imgFile.substr(parseInt(newsIndex + 1));
14                     //console.log(news);
15                     $.ajax({
16                         type: "post",
17                         url: base_url + "ZITAOHUI/upload/image",
18                         data: {
19                             "imageData": news
20                         },
21                         dataType: "json",
22                         success: function(data) {
23                             if(data.code == 1) {
24                                 var _url = data.extend.msg.fileUrl;
25                                 $('.add_img11').attr('src',_url);
26                                 placard = _url;
27                             } else {
28                                 alert("上傳失敗，請刷新後重試");
29                             }
30                         },
31                         error: function(error) {
32     
33                         }
34                     });
35                 };
36                 //console.log(file_img.size);
37                 if(file_img.size>1024*1024){
38                     alert('圖片大小大於1M，請壓縮圖片後重試');
39                 }else{
40                     //正式的讀取文件
41                     reader.readAsDataURL(file_img); 
42                 }
43                 
44             }

這裏用一點須要注意的是41行的代碼；用reader.readAsDataURL(file)，根據你們編程經驗也都能看出，就是調用FileReader類中的readAsDataURL方法，並把以前獲取的file對象傳進去。若是讀取成功，則調用reader.onload事件。也就是說41行的代碼是在8行的代碼執行以前的，也就是爲何咱們的對圖片的大小判斷要在這以前進行。

在代碼的10行，咱們獲取的就已是base64的代碼結構了。而後12和13行的代碼是爲了把base64的前面的格式去掉；請看下面的兩幅圖（11行和14行的打印結果）；

而後經過ajax上傳，就能上傳到服務器了。

附上另外一種上傳圖片的方式。