HTML代码片
<div class="form_box" id="uploadForm">
<div class="prompt_box"></div>
<div class="input_box">
<input type="text" placeholder="姓名" name="name" id="applicant"/>
</div>
<div class="input_box">
<input type="text" placeholder="电话" id="tel" name="phone"/>
</div>
<div class="post_box"></div>
<div class="upload_box clearfix">
<input type="file" id="upload_file" name="file"/>
<label for="upload_file" class="fl">点击上传简历</label>
<span class="fl">(仅支持 pdf 格式文件;<br/> 文件大小需小于1M)</span>
</div>
<div class="login_btn">确认</div>
</div>
javascript代码片
// 获取到要提交的表单内的所有值
var formData = new FormData();
formData.append("name", $("#applicant").val());
formData.append("phone", $("#tel").val());
formData.append("position", $(".post_box").html());
formData.append('file', $('#upload_file')[0].files[0]);
在这里提交数据的时候只需要把formData直接提交就好
$.ajax({
url : "yourURl",
type : "POST",
data: formData, // 这里的formData就是上面所说的所有数据
cache: false,
processData: false,
contentType: false,
success : function(data) {
}
// 获取文件名
$("#upload_file").on("change", function(){
var file = this.files[0] || this.files.item(0);
$(this).siblings("span").html(file.name);
})
2018年1月30号补充
在上传图片是我们经常会想办法让图片显示,并且拿到文件的后缀名用来校验,今天补充一下这些东西
让图片显示,我这里封装了一个方法
当你的是上传图片时,这里返回的url可以直接用作src里面的属性值
function getObjectURL(file) {
var url = null;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
获取文件后缀名
总有一些比较奇葩的人,命名文件的时候会这样,例如‘a.b.c.txt’。所以截取文件的后缀名要从最后一个点号那里开始
var index = file.files[0].name.lastIndexOf(".");
console.log(file.files[0].name.substring(index));
获取文件大小
file.files[0].size
本人的博客都是介绍一些简单的,但是开发中经常用的,相信好多小伙伴早已经将这些东西封装了。我是一名初级前端开发者,我希望将我在开发中遇到的问题总结到这里可以帮助到更多人