2021-07-28

表单处理及文件上传

1.html代码块：

 <div class="host-b">
                <p><span>上传文件:
                    <button type="button" class="btn newaddbtn" onclick="openFile()">点击上传</button></span></p>
                  <span id='Vfile' style="color:red;font-size: 12px;"></span>
                  <span id="filename"></span>
                  <input type="file" id="btn_file" style="display:none" accept=".csv">
              </div>

2.js代码块：

//上传
function openFile() {
	$('#btn_file').click();
	$('#btn_file').change(function() {
		var file = $("#btn_file").val();
		var fileName = getFileName(file);
		console.log(file);
		function getFileName(o) {
			var pos = o.lastIndexOf("\\");
			return o.substring(pos + 1);
		}
		$("#filename").html(fileName);
		var uploadFile = $('#btn_file')[0].files[0];
		console.log(uploadFile)
		var formData = new FormData();
		formData.append("file_data", uploadFile);
		if($("#filename").html()!==""){
			$.ajax({
				url:'../../tool/upload',
				type: 'POST',
				cache: false,   // 不缓存
				data: formData,  // 上传formdata封装的数据
				processData: false,  // jQuery不要去处理发送的数据
				contentType: false,   // jQuery不要去设置Content-Type请求头
				success:function (data) {    //成功回调
					if(data){
						$("#modal-success .modal-title").text('成功');
						$("#modal-success .modal-body").text('上传成功!');
						$("#modal-success").modal();
					}else{
						$("#modal-danger .modal-title").text('失败');
						$("#modal-danger .modal-body").text('上传失败!');
						$("#modal-danger").modal();
					}
				}
			})
		}else {
			$("#modal-upload .modal-title").text('失败');
			$("#modal-upload .modal-body").text('请选择文件');
			$("#modal-upload").modal();
		}
	});
}

3.处理步骤解析
html中放一个input(type=‘file’)的隐藏域，点击文件上传后，触发隐藏域，上传所需要的文件

**创建一个formData对象实例的方式 var formData = new FormData()；
**
注意：formData里面存储的数据是以健值对的形式存在的，key是唯一的，一个key可能对应多个value。 用一些键值对来模拟一系列表单控件，用于异步上传二进制文件。

---

通过调用append()方法来添加数据,使用formData对象发送文件,异步传输到后台;

正确上传后断点的调试结果如下图所示:

欧啦啦啦啦啦啦啦啦,以上就是本次经验分享!