javascript图片上传相关资料整理

图片上传的多种方式

一.使用Form表单，enctype="multipart/form-data"

    <form id="uploadForm" enctype="multipart/form-data">
        <input id="file" type="file" name="file"/>
    </form>

说明：
1.监听input上的change事件可以实现自动上传到服务器
2.服务器端通过name字段，获取上传图片的信息
3.数据信息为let imginfo = new FormData($('#uploadForm')[0]),imginfo是一个对象,通过post('/upload', imginfo);调用

如何不使用From表单上传图片

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

var formData = new FormData();
var imginfo = formData.append('file', $('#file')[0].files[0]);
// imginfo通过组装的方式得到，通过上面接口实现上传。
//其中`name=file`和`append('file')`中的file都是服务器端获取图片信息的标示。

二.使用Base64的方式，使用这种方式，可以直接实现本地预览

if (window.FileReader) {
  var oFileReader = new FileReader(),
  oFile = e.target.files[0];
  if (/^image*/.test(oFile.type)) {
    oFileReader.onloadend = function (e) {
      let binfo64 = e.target.result;
      let postinfo = {
        image: binfo64,
        filename: `passport-${new Date().getTime()}`
      }
    };
    oFileReader.readAsDataURL(oFile);
  } else {
    Toast.makeText('传入图片文件');
  }
}

三.使用Ajax上传图片信息，并显示图片上传的进度

来自https://www.w3ctrain.com/2015/07/11/uploading-image-with-ajax/

<form id="fileupload-form">    
     <input id="fileupload" type="file" name="file" >   
</form>

//绑定了`submit`事件。    
   $('#fileupload-form').on('submit',(function(e) {
       e.preventDefault();
       //序列化表单   
      var serializeData = $(this).serialize();
      
      // var formData = new FormData(this);
      $(this).ajaxSubmit({
           type:'POST',
           url: *yoururl*,
           dataType: 'json', 
           data: serializeData,            
           // data: formData,
           
           //attention!!!   
           contentType: false,      
           cache: false,             
           processData:false,      
             
           beforeSubmit: function() {
                   //上传图片之前的处理   
           },
           uploadProgress: function (event, position, total, percentComplete){ 
               //在这里控制进度条   
           },
           success:function(){
               
           },
           error:function(data){
               alert('上传图片出错');
           }
       });
   }));

//绑定文件选择事件，一选择了图片，就让`form`提交。   

   $("#fileupload").on("change", function() {
       $(this).parent().submit();
});

说明：
1.使用.serialize()获取表单的数据，不同通过val和text获取值
2.ajax上传图片这三个参数必须配置contentType: false, cache: false, processData:false
3.该处使用了uploadProgress 来获取文件上传的进度（本人没实验，待测）

图片压缩

• https://github.com/mhbseal/html5ImgCompress