php+html5+ajax实现上传图片的方法
发布:smiling 来源: PHP粉丝网 添加日期:2021-08-05 10:14:23 浏览: 评论:0
这篇文章主要介绍了php+html5+ajax实现上传图片的方法,对比分析了js原生及jQuery两种ajax调用上传图片的方法,以及php图片上传处理等技巧,需要的朋友可以参考下。
本文实例讲述了php+html5+ajax实现上传图片的方法,分享给大家供大家参考,具体如下:
- <?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>
Tags: php+html5+ajax
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)