利用H5特性FormData实现不刷新文件上传
程序员文章站
2022-06-09 09:29:56
之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种js库,附带多图上传,预览,甚至是图片处理等特技。那么如果不接触第三方的库,可不可以利用ajax来做。就这个问题...
之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种js库,附带多图上传,预览,甚至是图片处理等特技。那么如果不接触第三方的库,可不可以利用ajax来做。就这个问题,有人给出的解决方案是借助iframe,这里就不赘述了。但是html5是个好东西,他提供了formdata,formdata可以帮助我们拼凑参数,乃至文件资源。这样,我们就可以轻松用$.ajax不刷新上传。当然也不需要iframe。
代码
下列是前端部分。
<!doctyle html> <meta charset=utf-> <head> <script type="text/javascript" src="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(data); $.ajax({ url: 'ajax.php', type: 'post', data: data, datatype: 'json', cache: false, processdata: false, contenttype: false, success:function(data){ //alert(data); alert("uploadfile success"); } }); return false; }); }); </script> <form id='add'> <input type="text" name='book'></input> <input type="file" name='source'></input> <input type="submit"> </form>
不多赘述里面的代码,就讲一行代码
var data = new formdata($('#add')[0]);
formdata是一个表单对象,他可以将表单对象的表单域分别形成key=>value。那么是不是我们自己再拼接额外的key=>value呢,答案是可以的,详情可以百度formdata。
还有就是为什么是$('#add')[0]?
我只能说 js = jquery[0];
php部分
<?php header('content-type:application/json; charset=utf-8'); echo json_encode(array($_files,$_request)); ?>
这边只是做下测试,如果能看到$_files有东西,那么证明我们是可以做上传的。
测试上传
可以看到ajax请求到了ajax.php
看下preview,就可以看到返回$_files的相关信息了。
上一篇: 基于mybatis batch实现批量提交大量数据
下一篇: 有关Ajax跨域问题的两种解决方法
推荐阅读
-
利用H5特性FormData实现不刷新文件上传
-
php利用iframe实现无刷新文件上传功能的代码
-
使用PHP和HTML5 FormData实现无刷新文件上传教程,_PHP教程
-
jQuery利用FormData上传文件实现批量上传
-
使用PHP和HTML5 FormData实现无刷新文件上传教程
-
利用H5特性FormData实现不刷新文件上传
-
php利用iframe实现无刷新文件上传功能的代码_php技巧
-
php无刷新利用iframe实现页面无刷新上传文件(1/2)_PHP教程
-
利用JavaScript实现不刷新页面预览上传图片方法教程
-
php无刷新利用iframe实现页面无刷新上传文件(1/2)