使用H5功能表单数据上传文件而不刷新

之前朋友说不要刷新上传的文件。最暴力的解决方案是在网上搜索各种JS库，有上传多张图片、预览、甚至处理图片等特效。如果不碰第三方库，可以用ajax来做吗？在这个问题上，有些人给出的解决方案是使用iframe，这里就不赘述了。但是Html5是个好东西。它提供了FormData，可以帮助我们拼凑参数甚至文件资源。这样，我们就可以用$轻松上传。没有刷新的ajax。当然不需要iframe。

密码

以下是前部分。

！DOCTYLE html meta charset=utf-head script type=' text/JavaScript ' src=' http :http://apps . bdimg.com/libs/jquery/./jquery . min . js '/script/head script type=' text/JavaScript ' $(function(){ $(' # add '))。submit(function(){ var data=new FormData($(' # add ')[])；console.log(数据)；$.ajax({ url: 'ajax.php '，type: 'POST '，data: data，dataType: 'JSON '，cache: false，processData: false，contentType: false，success:function(数据){ //alert(数据)；警报(“上传文件成功”)；} });返回false});});/script form id=' add ' input type=' text ' name=' book '/input type=' file ' name=' source '/input type=' submit '/form，而不是重复里面的代码，只是一行代码。

var data=new FormData($(' # add ')[0])；FormData是一个表单对象，它可以将表单对象的表单字段分别组成key=value。那么，我们可以自己拼接额外的键=值吗？答案是肯定的，详情可以百度FormData。

为什么是$('#add')[0]？

我只能说js=jQuery[0]；

PHP部分

？php头(' Content-type : application/JSON；charset=utf-8 ')；echo json_encode(数组($_FILES，$ _ REQUEST))；就在这里做个测试。如果你能在$_FILES中看到一些东西，就证明我们可以上传。

测试上传

您可以看到ajax请求已经到达ajax.php。

查看预览，可以看到关于返回$_FILES的信息。