web前端图片上传

图片上传有很多种形式，但是听说ios只能传字符串，所以为了安卓、ios和web能用一个接口上传图片，采用了基于base64 的方法上传图片。

下面是我的html

 <div class="parn">
     <h6>店铺宣传海报</h6>
     <div class="img-div">
           <img src="" class="add_img11" id="store_img">
           <input type="file" class="files" onchange="updataimg(this)">
           <div class="remarks">海报大小尽量限制在1M以内</div>
      </div>
</div>

然后布局的话，大家就随意吧。最主要的就是img标签用来显示图片，我们这里的原理是这样的：先是图片上传，上传成功之后，后台给返回你上传图片的服务器地址，然后显示在这个img标签中。然后input是一个上传的标签，其中用updataimg这个函数来写上传的最主要的js代码；

这里是JS代码

 function updataimg(fileObj){
                 var file_img = fileObj.files['0'];
                 //创建读取文件的对象
                 var reader = new FileReader();
                 //创建文件读取相关的变量
                 var imgFile;
                 //为文件读取成功设置事件
                 reader.onload=function(e) {
                     //alert('文件读取完成');
                     imgFile = e.target.result;  //这里就已经是base64的格式了
                     //console.log(imgFile);
                     var newsIndex = imgFile.indexOf(",");
                     var news = imgFile.substr(parseInt(newsIndex + 1));
                     //console.log(news);
                     $.ajax({
                         type: "post",
                         url: base_url + "ZITAOHUI/upload/image",
                         data: {
                             "imageData": news
                         },
                         dataType: "json",
                         success: function(data) {
                             if(data.code == 1) {
                                 var _url = data.extend.msg.fileUrl;
                                 $('.add_img11').attr('src',_url);
                                 placard = _url;
                             } else {
                                 alert("上传失败，请刷新后重试");
                             }
                         },
                         error: function(error) {

                         }
                     });
                 };
                 //console.log(file_img.size);
                 if(file_img.size>1024*1024){
                     alert('图片大小大于1M，请压缩图片后重试');
                 }else{
                     //正式的读取文件
                     reader.readAsDataURL(file_img);
                 }

             }

这里用一点需要注意的是41行的代码；用reader.readAsDataURL(file)，根据大家编程经验也都能看出，就是调用FileReader类中的readAsDataURL方法，并把之前获取的file对象传进去。如果读取成功，则调用reader.onload事件。也就是说41行的代码是在8行的代码执行之前的，也就是为什么我们的对图片的大小判断要在这之前进行。

在代码的10行，我们获取的就已经是base64的代码结构了。然后12和13行的代码是为了把base64的前面的格式去掉；请看下面的两幅图（11行和14行的打印结果）；

然后通过ajax上传，就能上传到服务器了。

附上另一种上传图片的方式。