HTML5的 input:file上传 样式美化及表单异步提交
样式美化
请看博客:css input[type=file] 样式美化,input上传按钮美化
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。
DOM结构:
<a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a>
css样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*a upload */ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none }
上传类型控制 参考地址http://www.haorooms.com/post/input_file_leixing
关键点是异步提交,就是先选择文件,但不上传,待点击提交按钮后上传服务端返回上传是否成功信息
思路:利用FormData
对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest
发送这个"表单".
创建一个FormData对象
你可以先创建一个空的FormData
对象,然后使用append()
方法向该对象里添加字段,如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var oFiles = document.querySelector("#fileId"); var formData = new FormData(); formData.append("newFileName", this.state.formData["newFileName"]); formData.append("url", this.state.formData["url"]); formData.append("picture", oFiles.files[0]); reqwest({ url : '/modules/cms/manager/action/ImageControlAction/uploadImageControl.htm', method: 'post', contentType:false, processData:false, data:formData, success: (result) => { if(result.code==200) { Modal.success({ title: result.msg }); Actions.initStore(); this.props.hideAddModal(); }else{ Modal.error({ title: result.msg }); me.setState({ loading:false }); } } });
效果
我的ajax 是 reqwest,其中有
processData: false, //不要去处理发送的数据
contentType: false //不要去设置Content-Type请求头