移动端上传图片

上传图片.gif

html

        

                

                
            
            

                        //上传图片
                

                    X
                    
                    
                
                上传截图
            
            

                
            
            提交反馈
        

js

FileReader是html5定义的用于读取文件的API，FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

• readAsBinaryString:将文件读取为二进制编码
• readAsText:将文件读取为文本
• readAsDataURL:将文件读取为DataURL
• abort : 终端读取操作

FileReader接口的使用

        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        //将文件以Data URL形式读入页面 
        reader.readAsDataURL(file);
       reader.onload = function(e) {
          //获取结果
          result = e.target.result;
        }

确保用户上传的是图片

        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }

css

不用input[type="file"]默认样式所以将其透明度设为0，并为其父元素设置想要的样式

input[type="file"]{
    opacity: 0;
    position:absolute;
    width:100%; 
    height: 100%;
    border:none
}
.pushPhoto>img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width:0%;
    height: 0%;
    
}
.close-btn{
    //删除按钮
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    color: #555;
    font-size: 0.8rem;
    background:#dcdcdc;
    padding: 5% 8%;
    z-index: 2;
}
.pushPhoto{
    background: url(../img/advice_pic_btn.png) no-repeat center center;//样式背景图
    background-size: contain;
}

表单上传

serialize():输出序列化表单值的结果

标签的 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码

• application/x-www-form-urlencoded : 在发送前编码所有字符（默认）
• multipart/form-data : 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
• text/plain : 空格转换为 "+" 加号，但不对特殊字符编码。

        $.ajax({
            cache: true,
            type: "POST",
            url:URL,
            data:   $('#formId').serialize(),
            async: false,
            error: function(request) {
                
            },
            success: function(data) {
              if(typeof(data)=="string"){
                  data=JSON.parse(data);
              }
              if(data.resultCode==1){
                  alertmsg(data.result);
              }
            }
        });