js提交form表单 - input file 文件上传控制上传文件的大小和格式
2017-09-03 10:48
656 查看
js提交form表单
所以我总结了一下,用JavaScript提交表单大概有两种写法(根据我目前的理解)
1. document.formName.submit();
2. var form = document.getElementById(id);
form.submit();
input file 文件上传控制上传文件的大小和格式
html
[html] view
plain copy
<form action="/ask/addaskrecordattachment2" enctype="multipart/form-data" method="post" id="attachment_uploads">
<div class="attachs fl">
<div class="t_fjfont">附件:</div>
<div class="upload_btns"><input type="file" name="file" id="file" onchange="fileChange(this);" /> <input type="hidden" name="id" class="hideids" /></div>
<div class="upload_btns" style="color:red;" id="upsizelabel"> (为了保证您的询价质量及服务,请先下载材料模板)</div>
</div>
<div class="attachs fl">
<div class="t_fjfont" style="color:red;font-size:12px;font-weight:bold">文件上限2MB</div>
<div class="upload_btns" style="color:0066CC;text-decoration: underline;"> <a href="javascript:getDownload();" >附件表格样式(下载)</a></div>
</div>
<div class="attachs fl">
<div class="t_fjfont"> </div>
<div class="upload_btns"><input type="file" name="files" id="file_fujian" onchange="filefujianChange(this);" /> <input type="hidden" name="rev" class="hide_rev" /></div>
<div class="upload_btns" style="color:red;" id="upsizelabel"> (请上传CAD图纸或者图片格式,此处不接受询价单)</div>
</div>
<div class="clear"></div>
</form>
js
[javascript] view
plain copy
function fileChange(target) {
var fileSize = 0;
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if(size>2000){
alert("附件不能大于2M");
target.value="";
return
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="xls" && fileName !="xlsx"){
alert("请选择execl格式文件上传!");
target.value="";
return
}
}
function filefujianChange(target) {
var fileSize = 0;
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if(size>2000){
alert("附件不能大于2M");
target.value="";
return
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="jpg" && fileName !="jpeg" && fileName !="pdf" && fileName !="png" && fileName !="dwg" && fileName !="gif" ){
alert("请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)!");
target.value="";
return
}
}
ps:支持市面上主流的浏览器~~~~~IE,谷歌,FF都支持!
所以我总结了一下,用JavaScript提交表单大概有两种写法(根据我目前的理解)
1. document.formName.submit();
2. var form = document.getElementById(id);
form.submit();
input file 文件上传控制上传文件的大小和格式
html
[html] view
plain copy
<form action="/ask/addaskrecordattachment2" enctype="multipart/form-data" method="post" id="attachment_uploads">
<div class="attachs fl">
<div class="t_fjfont">附件:</div>
<div class="upload_btns"><input type="file" name="file" id="file" onchange="fileChange(this);" /> <input type="hidden" name="id" class="hideids" /></div>
<div class="upload_btns" style="color:red;" id="upsizelabel"> (为了保证您的询价质量及服务,请先下载材料模板)</div>
</div>
<div class="attachs fl">
<div class="t_fjfont" style="color:red;font-size:12px;font-weight:bold">文件上限2MB</div>
<div class="upload_btns" style="color:0066CC;text-decoration: underline;"> <a href="javascript:getDownload();" >附件表格样式(下载)</a></div>
</div>
<div class="attachs fl">
<div class="t_fjfont"> </div>
<div class="upload_btns"><input type="file" name="files" id="file_fujian" onchange="filefujianChange(this);" /> <input type="hidden" name="rev" class="hide_rev" /></div>
<div class="upload_btns" style="color:red;" id="upsizelabel"> (请上传CAD图纸或者图片格式,此处不接受询价单)</div>
</div>
<div class="clear"></div>
</form>
js
[javascript] view
plain copy
function fileChange(target) {
var fileSize = 0;
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if(size>2000){
alert("附件不能大于2M");
target.value="";
return
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="xls" && fileName !="xlsx"){
alert("请选择execl格式文件上传!");
target.value="";
return
}
}
function filefujianChange(target) {
var fileSize = 0;
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if(size>2000){
alert("附件不能大于2M");
target.value="";
return
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="jpg" && fileName !="jpeg" && fileName !="pdf" && fileName !="png" && fileName !="dwg" && fileName !="gif" ){
alert("请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)!");
target.value="";
return
}
}
ps:支持市面上主流的浏览器~~~~~IE,谷歌,FF都支持!
相关文章推荐
- js提交form表单 - input file 文件上传控制上传文件的大小和格式
- fileinput.js在上传文件时提交表单数据
- 用form表单input type="file"上传文件(提交前判断)
- html5中的input(type="file")的multiple属性,实现多文件上传,并用js控制文件大小,数量
- input file 控制上传文件的大小和格式(兼容ie)
- ajax form表单提交 input file中的文件
- HTML input file js再次上传同名文件无法提交的解决方案
- 在IE中必须点击input file 控件的浏览按钮才能提交上传,否则没有权限 。js文件报拒绝访问,解决办法是将input file控件定位到你要点击的地方 ,并且input file做成透明的
- SpringMVC + FormDate + Vue + file表单 ( 实现 js 单文件和多文件上传 )
- jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传。
- jquery的异步提交表单(异步上传文件)及jquery.form.js上传文件注意事项
- 带文件上传的form表单提交, jquery的ajaxfileupload+插件dropzone图文详解
- 关于使用jquery.form.js上传文件同时提交表单的方法
- jquery.form.js提交form表单 上传文件
- JS判断文件大小-文件上传-浏览器-input-file
- input file 文件上传,js控制上传文件的大小和格式
- html5 input:file文件上传格式控制
- js限制input file文件上传的大小和类型
- ajaxFileUpload.js上传图片插件,全浏览器兼容,规避json错误,带文件格式大小拦截
- 【jQuery】Jquery.form.js实现表单异步提交以及文件上传(带进度条)