原生JS和jQuery版实现文件上传功能
本文实例分享了原生JS版和jQuery版实现文件上传功能的例子,供大家参考,具体内容如下
<!doctypehtml> <htmllang="zh"> <head> <metacharset="utf-8"> <title>HTML5AjaxUploader</title> <scriptsrc="jquery-2.1.1.min.js"></script> </head> <body> <p><inputtype="file"id="upfile"></p> <p><inputtype="button"id="upJS"value="用原生JS上传"></p> <p><inputtype="button"id="upJQuery"value="用jQuery上传"></p> <script> /*原生JS版*/ document.getElementById("upJS").onclick=function(){ /*FormData是表单数据类*/ varfd=newFormData(); varajax=newXMLHttpRequest(); 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(){ varfd=newFormData(); 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>
php代码:
<?php if(isset($_POST['upload'])){ var_dump($_FILES); move_uploaded_file($_FILES['upfile']['tmp_name'],'up_tmp/'.time().'.dat'); //header('location:test.php'); exit; } ?>
更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助。