input file 上传图片问题

html代码如下：

<input id="fileup" type="file" accept="image/*" capture="camera" >

　　js代码：

  $('#fileup').change(function (e) {
        /*var val= $('#upimg').valueOf()*/
        var file = $('#fileup')[0].files[0];
        //创建读取文件的对象
        var reader = new FileReader();
        //创建文件读取相关的变量
        var imgFile;
        //为文件读取成功设置事件
        reader.onload = function (e) {
            imgFile = e.target.result;
          
          var index= layer.open({
                type: 2
                ,content: '正在上传...',
              shadeClose:false
            });//提示正在上传
           $.ajax({
             url: '',
             type: "POST",
             data: {imgsrc: imgFile},
             success: function (data) {
            if(data.success==true) {
                layer.close(index);//关闭提示框
                $(".up img").attr("src", data.imageUrl);
            }
             }
             });
            
        };

这里我们会踩到一些坑：

 android手机微信内置浏览器上传时，会出现change事件无效，所以在这里特别提醒下在input内要加上capture="camera"；

这里我是直接获取上传图片的base64码(e.target.result)，由后端处理返回数据。

大家也可以用创建dataform来提交数据：

  var fd = new FormData();
    fd.append("upload", 1);
    fd.append("upfile", $(".fileup")[0].files[0]);

　　FormData包含append方法可直接调用

接下来是第三种方法：

<form  action='XXXXXXXXXXXX' method='post' enctype='multipart/form-data><input type="file" accept="image/*" capture="camera"> </form> 　　

　通过原生表单提交的方式来进行上传

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数据是挺适用的，但是，对于文件，科科，就不能乱编码了，该什么就是什么，只能使用multipart/form-data作为enctype属性值。

 

下面是对FileReader作一个补充：

• readAsDataURL() 方法。//将文件读取为base64的格式，也就是可以当成图片的src
• result 属性 //将读取的数据保存在result里。
• progress 事件 //定时触发，来获取当前已上传文件的大小，如进度条
• loade 事件 //文件上传完成时触发
• loadend 事件 //文件上传完成时（不管成功、失败）触发

•   var reader = new FileReader(); //新建FileReader对象
      reader.readAsDataURL(file); //读取为base64
      //以下代码可以删除
      reader.onloadstart = function(){
         ... //开始读取
      };
      reader.onprogress = function(e){
          //这个是定时触发的事件，文件较大的时候较明显
          var p = '已完成：' + Math.round(e.loaded / e.total * 100) + '%' ;//上传完成进度
  
      };
      reader.onabort = function(){
           ... //用作取消上传功能
      };
      reader.onerror = function(){
          console.log('error'); //文件读取出错的时候触发
      };
      reader.onload = function(){
          console.log('load complete'); //完成
      };