用 jquery 和 FormData上传文件

var data = new FormData(),
data.append("tableName", $('.tablename1').val());
data.append("fileToUpload", $('#sFile')[0].files[0]);
$.ajax({
	type: 'POST',
	url: url
	data: data,
	dataType:'json',
	contentType:false,  //必须false才会自动加上正确的Content-Type
	    	processData:false,  //必须false才会避开jQuery对 formdata 的默认处理
	success: function (data) {

	},
	error:function(error){

	}
});

可以使用以下步骤: 1. 创建一个HTML表单,其中包含一个文件选择器和一个“上传”按钮。 2. 使用jQuery在点击“上传”按钮时触发一个函数。 3. 在该函数中,获取选择的文件列表并将其存储在变量中。 4. 使用FormData对象来创建一个新的表单数据对象,并向其中添加每个文件。 5. 发送一个AJAX请求,将FormData对象发送到服务器端。 6. 一旦接收到服务器的响应,可以使用jQuery添加一个新的图片元素到页面上,以显示上传的图片。 以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <title>Upload Images with jQuery and FormData</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <form id="imageUploadForm"> <input type="file" id="imageInput" name="imageInput" multiple> <input type="button" value="Upload" onclick="uploadImages()"> </form> <div id="imagePreview"></div> <script> function uploadImages() { var files = $('#imageInput')[0].files; var formData = new FormData(); for (var i = 0; i < files.length; i++) { formData.append('images[]', files[i]); } $.ajax({ url: 'uploadImages.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(data) { for (var i = 0; i < files.length; i++) { var previewImg = $('<img>').attr('src', URL.createObjectURL(files[i])); $('#imagePreview').append(previewImg); } }, error: function() { alert('An error occurred while uploading the images.'); } }); } </script> </body> </html> ``` 在上面的示例代码中,我们创建了一个表单,其中包含一个文件选择器和一个“上传”按钮。当用户点击“上传”按钮时,将调用uploadImages()函数。该函数首先获取选择的文件列表,并使用FormData对象创建一个新的表单数据对象。然后,它使用AJAX发送FormData对象到服务器端。一旦接收到服务器的响应,就会使用jQuery添加一个新的图片元素到页面上,以显示上传的图片。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值