上传文件,并获取文件名

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

---

本人的博客都是介绍一些简单的，但是开发中经常用的，相信好多小伙伴早已经将这些东西封装了。我是一名初级前端开发者，我希望将我在开发中遇到的问题总结到这里可以帮助到更多人