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上传，就能上传到服务器了。

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