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> 　　

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