请问，jq上传图片到服务端怎么弄，而且能在网页预览图片

Question

请问，jq上传图片到服务端怎么弄，而且能在网页预览图片，有没有例子能看一下

Answer 1

曾经写过的一个方法，看能不能用，有些es6的语法可以抽掉。let uploadImg = () => {&nbsp;&nbsp; &nbsp; let filechooser = $('.filechooser'); //点击上传的容器，因为我这里多个&nbsp; &nbsp; // 200 KB 对应的字节数&nbsp; &nbsp; const maxsize = 200 * 1024;&nbsp; &nbsp; filechooser.each(function(i, item){&nbsp; &nbsp; &nbsp; &nbsp; $(item).on('change',function(){ //调用change方法&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let file = this.files[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let _this = this;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 接受 jpeg, jpg, png 类型的图片&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var result = this.result;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //License = result;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 如果图片小于 200kb，不压缩&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (result.length <= maxsize) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toPreviewer(_this,result,i);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var compressedDataUrl = compress(img, file.type);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //License_back = compressedDataUrl;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toPreviewer(_this,compressedDataUrl,i);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img = null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.src = result;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(file);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //预览&nbsp; &nbsp; let toPreviewer = (_this,dataUrl,i) => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(dataUrl);&nbsp;&nbsp; &nbsp; };&nbsp; &nbsp; let compress = (img, fileType) => {&nbsp; &nbsp; &nbsp; &nbsp; var canvas = document.createElement("canvas");&nbsp; &nbsp; &nbsp; &nbsp; var ctx = canvas.getContext('2d');&nbsp; &nbsp; &nbsp; &nbsp; var width = img.width;&nbsp; &nbsp; &nbsp; &nbsp; var height = img.height;&nbsp; &nbsp; &nbsp; &nbsp; canvas.width = width;&nbsp; &nbsp; &nbsp; &nbsp; canvas.height = height;&nbsp; &nbsp; &nbsp; &nbsp; ctx.fillStyle = "#fff";&nbsp; &nbsp; &nbsp; &nbsp; ctx.fillRect(0, 0, canvas.width, canvas.height);&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(img, 0, 0, width, height);&nbsp; &nbsp; &nbsp; &nbsp; // 压缩&nbsp; &nbsp; &nbsp; &nbsp; var base64data = canvas.toDataURL(fileType, 0.75);&nbsp; &nbsp; &nbsp; &nbsp; canvas = ctx = null;&nbsp; &nbsp; &nbsp; &nbsp; return base64data;&nbsp; &nbsp; };};export default uploadImg;