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样式

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
});
}
}
});

View Code

效果


我的ajax 是 reqwest，其中有

processData: false, //不要去处理发送的数据
contentType: false //不要去设置Content-Type请求头