input[type=file]上传图片及转为base64码以及预览

<input type="file" id="imgurl" capture="camera" accept="image/png,image/gif,image/jpeg"/>

在移动端上传可以像上面那样设置，如果不行的话可以将后面的accept属性改成accept="image/*";

accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。

如果不限制图像的格式，可以写为：accept="image/*"。

如果想在上传完文件执行需求，input[type=file]用click事件是不行的，要用change事件，这样就可以在上传完文件后干你爱干的事。

input[type=file]的样式如果设置不了，或者嫌设置太麻烦的话，可以直接将它的opacity设置为0，然后覆盖在触发的按钮上就行。

还有如果不传base64，而是直接用form上传文件的话，一定要设置这个属性：enctype="multipart/form-data"

转base64码(其实就是图片的url，只不过是换了种方式来表示)

$('input[type=file]').on{'change',function(){
var reader=new FileReader();
  reader.onload=function(e){
  console.log( reader.result);  //或者 e.target.result都是一样的，都是base64码
}  
reader.readAsDataURL(this.files[0])
//filses就是input[type=file]文件列表，files[0]就是第一个文件，这里就是将选择的第一个图片文件转化为base64的码
}                                

 

预览，这个最简单，直接将上面得到的reader.result赋值给一个img标签就可显示，后台传的图片数据也直接把reader.result储存起来发过去就可以。

其实后台的需求是要我用canvas来上传，用canvas既能压缩图片，又能限制大小，又能限制尺寸，也能转base64码。可惜由于我能力不足，加上时间有点赶，于是就先用着这种老点的方法，不过技术是与时俱进的，不能仅仅是做出来就行，要赶上技术的变化才行，下次一定要学会用canvas来上传图片才行。