ajax文件上传主要用到了FormData，其API使用教程如下：https://developer.mozilla.org/zh-CN/docs/Web/API/FormDatahtml<input type="file" name="fileName1" id="fileName1"/><input type="button" onclick="sendToUser()" id="sendToUser" value="提交" />js function sendToUser(){ //在这里进行ajax 文件上传 用户的信息 var $file1 = $("input[name='fileName1']").val();//用户文件内容(文件) // 判断文件是否为空 if ($file1 == "") { alert("请选择上传的目标文件! ") return false; } //判断文件类型,我这里根据业务需求判断的是Excel文件 var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase(); if(fileName1 != "xls" && fileName1 !="xlsx"){ alert("请选择Execl文件!"); return false; } //判断文件大小 var size1 = $("input[name='fileName1']")[0].files[0].size; if (size1>104857600) { alert("上传文件不能大于100M!"); return false; } boo1 = true; var type = "file"; var formData = new FormData();//这里需要实例化一个FormData来进行文件上传 formData.append(type,$("#fileName1")[0].files[0]); //多文件上传在这里继续append //eg : //formData.append(type,$("#fileName1")[0].files[0]); $.ajax({ type : "post", url : "uploadToFile", data : formData, processData : false, contentType : false, success : function(data){ if (data=="error") { alert("文件提交失败!"); }else{ $("input[name='userUrl']").val(data); alert("文件上传成功!"); }} }); }重点最后一段代码即可

1、关联调用，隐藏上传框<button onclick="chooseFile.click()">上传文件</button><input type="file" id="chooseFile" style="display:none;">参考https://blog.csdn.net/qq_28306215/article/details/853229442、使用label for指定标签css.upload_bp input[type='file']{ display: none;}.loadbp{ padding: 0 30px; height: 40px; border: 1px solid #dd5923; color: #dd5923; font-size: 16px; display: flex; align-items: center; box-sizing: border-box;}.loadbpsuccess{ height: 40px; background: #f5f7f9; border-radius: 2px; font-size: 16px; line-height: 40px; padding: 0 30px; color: #262626; letter-spacing: 0; text-align: center; margin-left: 15px; box-sizing: border-box; position: relative;}.loadbpsuccess span{ font-size: 20px; color: #000; position: absolute; top: -10px; right: 2px;}html<div style="display:flex;align-items: center;"> <label class="upload_bp" for="fileinp"> <input type="file" id="fileinp"> <p class="loadbp">上传附件</p> </label> <p class="loadbpsuccess">附件1.pdf <span>×</span></p> </div>参考：https://blog.csdn.net/Dilemma_me/article/details/100120542