上传图片.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);
}
}
});
