js实现图片预览和FormData上传

1. html

<!-- 预览的图片 --><div class="file-image">   <img src="" alt="" id='image'></div><!-- 添加图片 --><div class="file-btn">  添加图片  <input type="file" @change="addImage" id="file"></div><!-- 上传图片 --><button> 上传</button>

预览图片js

var file;var addImage = function(){    file = jQuery('.file')[0].files[0];    //添加图片路径到img src中进行预览    jQuery('#iamge').attr('src',getObjectURL(file));    //不同浏览器下的路径不同     function getObjectURL(file) {          var url = null;          if (window.createObjectURL != undefined) { // basic            url = window.createObjectURL(file);          } else if (window.URL != undefined) { // mozilla(firefox)            url = window.URL.createObjectURL(file);          } else if (window.webkitURL != undefined) { // webkit or chrome            url = window.webkitURL.createObjectURL(file);          }          return url;        }}

利用FormData上传图片js

 var imgdata = new FormData(); imgdata.append("img",file); //利用ajax上传jQuery.ajax({        type: "PUT",        url: url,        data: imgdata,        async: false,        cache: false,        contentType: false,        processData: false,        success: function (data) {         alert("上传成功");        },        error: function (jqXHR) {          alert("上传失败")        }    })