HTML5中用 jQuery + Ajax 上传文件

小鱼儿 2022-07-16 12:55 213阅读 0赞

HTML5 中已经可以用 Ajax 上传文件了，而且代码非常简单，借助 FormData 类即可发送文件数据。

<?php if (isset($_POST['upload'])) { var_dump($_FILES); move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat'); //header('location: test.php'); exit; } ?>
    <!doctype html>
    <html lang="zh">
    <head>
    <meta charset="utf-8">
    <title>HTML5 Ajax Uploader</title>
    <script src="jquery-2.1.1.min.js"></script>
    </head>
    
    <body>
    <p><input type="file" id="upfile"></p>
    <p><input type="button" id="upJS" value="用原生JS上传"></p>
    <p><input type="button" id="upJQuery" value="用jQuery上传"></p>
    <script> /*原生JS版*/ document.getElementById("upJS").onclick = function() { /* FormData 是表单数据类 */ var fd = new FormData(); var ajax = new XMLHttpRequest(); fd.append("upload", 1); /* 把文件添加到表单里 */ fd.append("upfile", document.getElementById("upfile").files[0]); ajax.open("post", "test.php", true); ajax.onload = function () { console.log(ajax.responseText); }; ajax.send(fd); } /* jQuery 版 */ $('#upJQuery').on('click', function() { var fd = new FormData(); fd.append("upload", 1); fd.append("upfile", $("#upfile").get(0).files[0]); $.ajax({ url: "test.php", type: "POST", processData: false, contentType: false, data: fd, success: function(d) { console.log(d); } }); }); </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery ajax+spring mvc上传文件

导入commons-fileupload-1.2.2.jar和commons-io-2.4.jar及spring的一些jar包创建上传处理类UploadAction

灰太狼/ 2023年10月16日 22:49/ 0 赞/ 59 阅读

相关 HTML5 文件上传

HTML5 文件上传另参考 http://www.jianshu.com/p/46e6e03a0d53 1 filelist对象与file对象： 1 <inpu

怼烎@/ 2023年08月17日 16:20/ 0 赞/ 154 阅读

相关 java ajax 文件上传_在HTML5里用Ajax上传文件到Java Servlet

HTML5带来一个很棒的功能，就是能够使用XMLHttpRequest版本2上传文件。现代Gecko和WebKit浏览器，包括一个完美的对象参数formdata，允许结合既

矫情吗；*/ 2022年11月03日 10:53/ 0 赞/ 25 阅读

相关 put ajax 文件上传,Jquery/ajax 如何以put方式上传文件

用户提问 using System.Data.OleDb; using System.Data; namespace \_211 \{ /// /// DBQuery 的摘要

我会带着你远行/ 2022年09月03日 11:20/ 0 赞/ 235 阅读

相关 HTML5中用 jQuery + Ajax 上传文件

　　HTML5 中已经可以用 Ajax 上传文件了，而且代码非常简单，借助 FormData 类即可发送文件数据。 <?php if (isset($_POST['u

小鱼儿/ 2022年07月16日 12:55/ 0 赞/ 214 阅读

相关 jquery ajax上传文件

<form action="" id="upfile" name="upfile" method="post" enctype="multipart/form-data

小咪咪/ 2022年04月11日 08:22/ 0 赞/ 242 阅读

相关 jQuery HTML5文件上传美化插件jQuery.filer

下载及详情参考jquery插件库：[http://www.jq22.com/jquery-info11363][http_www.jq22.com_jquery-info11

左手的ㄟ右手/ 2022年03月21日 03:49/ 0 赞/ 430 阅读

相关 jQuery Ajax文件上传(php)

如何实现jQuery的Ajax文件上传，PHP如实文件上传. AJAX上传文件，PHP上传文件。【PHP文件上传】在开始之前，我觉得是有

àì夳堔傛蜴生んèń/ 2022年03月09日 12:39/ 0 赞/ 406 阅读

相关 jQuery ajax实现文件上传

jQuery+ajax实现文件上传我在写jQuery接口上传文件的时候，遇到一个特头疼的问题，那就是上传图片，刚开始那我以为一个简单的form表单就搞定了，没想到写了两

蔚落/ 2021年07月26日 23:31/ 0 赞/ 512 阅读

相关 html5+FormData 实现ajax文件上传

大家都知道在html4时代，上传只能使用表单post提交方式，无法使用ajax(XMLHttpRequest )直接进行表单提交。但在HTML 5的概念形成后，W3C开始考虑标

女爷i/ 2021年06月24日 14:34/ 0 赞/ 500 阅读