上传图片的实现

最新推荐文章于 2024-02-19 21:49:30 发布

原创最新推荐文章于 2024-02-19 21:49:30 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用FormData对象进行异步文件上传，包括FormData对象的创建、使用方法、与Ajax结合发送数据的方式，以及如何实现文件预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：formData中的数据在控制台上的console里面是打印不出来的，只能在控制台的network里面查看到具体的发送数据和发送选项

与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
二进制文件：
包含在 ASCII及扩展 ASCII 字符中编写的数据或程序指令的文件。计算机文件基本上分为二种：二进制文件和 ASCII（也称纯文本文件），图形文件及文字处理程序等计算机程序都属于二进制文件。这些文件含有特殊的格式及计算机代码。ASCII 则是可以用任何文字处理程序阅读的简单文本文件。

一、创建FormData对象

var formdata = new FormData();

二、FormData对象的方法

<1>普通方法

obj.append()

FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append()，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。

你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段

例：

var formdata=new FormData();
formdata.append("键名"，“键值”);

//具体里面是否叫键名键值，我也不是很清楚，不过因为其形式与json相似，姑且这么叫吧
键值可以是一个 Blob 对象，File对象或者字符串，剩下其他类型的值都会被自动转换成字符串

<2>用表单元素或整个表单来初始化FormData对象
可以用一个已有的 form 元素或表单来初始化 FormData 对象，只需要把这个 form 元素或表单作为参数传入 FormData 构造函数即可。
例：

var formdata=new FormData("表单元素/表单")；

具体实例：

var formElement = $("myFormElement");
var formdata = new FormData(formElement);

三、发送

使用 jQuery 来发送 FormData，但必须要正确的设置相关选项：

var formdata = new FormData($("fileinfo"));
$.ajax({
  url: "",
  type: "POST",
  data: formdata,
  processData: false,  // 告诉jQuery不要去处理发送的数据
  contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});

这里要注意几点：

<form>标签添加enctype="multipart/form-data"属性
jQuery 的 ajax 中processData设置为false （表示不需要对数据做处理）
jQuery 的 ajax 中cache设置为false （表示上传文件不需要缓存）
jQuery 的 ajax 中contentType设置为false （因为前面已经声明了是‘FormData对象’）
如果没有<form>标签，也没有enctype="multipart/form-data"属性，怎么使用formData对象提交表单呢？如下方式：

var formData = new FormData();
formData.append('name', $('#name').val());
formData.append('file', $('#file')[0].files[0]);//正确，但使用前提是要将此写在.change(function(){})中，否则显示undefined。//还有另一种获取文件对象的方法，详情请见最下方实例

$.ajax({
    url: '',
    type: 'POST',
    data: formData,
    cache: false,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

注意：

append()的第二个参数应是文件对象，即$('#file')[0].files[0]。
contentType也要设置为‘false’。
从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签想要能够上传多个文件，
只需要在<input type="file">里添加multiple或multiple="multiple"属性。

实现图片预览：
方法一：FileReader()

<!doctype html>
<html>
<head>
　　<title>文件上传</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body> 
	<input type="file" id="uploadFile" onchange="readLocalFile()";/>
	<img src="" style="width: 100px;height: 100px;" />   
</body>
<script>
//input标签在触发change()事件时调用
   function readLocalFile () {
       // console.log("start");
        var localFile =$("#uploadFile").files[0];
        //console.log(uploadFile);
        //console.log(localFile.name);
        //新建对象
        var reader = new FileReader();
        reader.onload = function(event) {//成功读取
        	//console.log(event);
        	var content;
            content = event.target.result;
            //console.log(content);
           $("img").src = content;//设置图片src
        }
        reader.readAsDataURL(localFile);//将文件读取为DataURL
        //Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件
    }
 </script>
</html>

FileReader()方法思路无非：
首先要写在.change()事件中，其次要新建一个FileReader()对象，然后调用obj.onload()方法获得文件加载之后的结果，提取出其中的base64编码，并将其设置为img的src。最后调用obj.readAsDataURL()方法

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。
无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

FileReader接口的方法

方法名	            参数	               描述
readAsBinaryString	file	         将文件读取为二进制编码
readAsText	        file,[encoding]	 将文件读取为文本
readAsDataURL	    file	         将文件读取为DataURL
abort	            (none)	         终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

事件         	描述
onabort	        中断
onerror	        出错
onloadstart	    开始
onprogress	    正在读取
onload	        成功读取
onloadend    	读取完成，无论成功失败

方法二：

//preview img ： URL.createObjectURL 方式
 2     document.getElementById('imgFile').onchange = function(e){
 5         var ele =  document.getElementById('imgFile').files[0];
 6 
 7         var createObjectURL = function(blob){
 8           return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
 9         };
10         var newimgdata = createObjectURL(ele);
11 
12         var pvImg = new Image();
13         pvImg.src = newimgdata;
14         pvImg.setAttribute('id','previewImg');
15 
16         $('.preview_wrap').html('').append(pvImg);
21     }

实例：提交图片文件，并且实现预览
看了好多文章，貌似使用ajax传递简单参数（非文件类型）只需使用json，而传递文件类型的，必须得用FormData来传

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="file" name="">
<img src="" style="width: 100px;height: 100px;">
</body>
<script type="text/javascript">
	 $("input").on("change",function(e) {
	 	//获取文件对象，方法一
	 	   var file_input1=$("input")[0].files[0]
	 	   console.log(file_input1);//控制台打印对象
	 	//获取文件对象，方法二
	 	   console.log(e);
	 	   var file_input2=e.target.files[0];
	 	   console.log(file_input2);//控制台打印对象
	 	   //注意这里的的下标指的是某一个文件，如果上传多个文件，就不是下标为零了
		//控制台图片预览
           console.log(getObjectURL(file_input2));   //获取路径
           $("img").attr("src",getObjectURL(file_input2));//预览
        //定义FormData对象
	 	   var formdata=new FormData();
	 	   formdata.append("file_name","img");
	 	   formdata.append("file",file_input1);
	 	   //formdata.append("file",file_input2);
	 	//ajax申请
	 		 $.ajax({
			        url: '',
			        type: 'POST',
			        data: formdata,
			        cache: false,
			        processData: false,
			        contentType: false
			    }).done(function(res) {
			    	//成功回调函数
			    }).fail(function(res) {
			    	//失败回调函数
			    }).always(function(){
					//不论成功与否都会执行
				});
        })
	  function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
        return url
    };

</script>
</html>