移动端上传图片

上传图片.gif

html

        <form id="fm_feedBack" enctype="multipart/form-data" method="post">
                <div class="top-container">
                <textarea name="content" id="adviceContent" name="" rows="" cols="" placeholder="把你使用过程的感受、意见告诉我们吧，我们会努力改进的！"></textarea>
            </div>
            <div class="photo-container">
                        //上传图片
                <div class="pushPhoto"  style="position: relative;">
                    <span class="close-btn" onclick="delImg(this)">X</span>
                    <img />
                    <input name="adviceImga" type="file" accept="image/*"  value="+" capture="camera"  onchange="imgPreview(this)">
                </div>
                <span class="photo-tips">上传截图</span>
            </div>
            <div class="line-container">
                <input type="tel" name="phoneNo" id="contactMethod" value="" placeholder="请填写您的联系方式(手机/QQ都可以)"/>
            </div>
            <button type="button" class="btn" >提交反馈</button>
        </form>

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():输出序列化表单值的结果
<form> 标签的 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);
              }
            }
        });