hmtl5 php ajax图片上传,php+html5+ajax实现上传图片的方法及实例

这篇文章主要介绍了php+html5+ajax实现上传图片的方法,对比分析了js原生及jQuery两种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;

}

?>

HTML5 Ajax Uploader

/*原生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);

}

});

});

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

相关推荐:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的实例页面,实现了通过粘贴图片直接使用Ajax上传到服务器: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>粘贴图片上传</title> </head> <body> <h3>粘贴图片上传</h3> <p>请在下面的输入框中粘贴您要上传的图片:</p> <textarea id="pasteArea" rows="10" cols="50"></textarea> <br> <button onclick="upload()">上传</button> <script> function upload() { var data = new FormData(); var blob = new Blob([pasteImage]); data.append('file', blob, 'image.png'); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { alert('上传成功'); } else { alert('上传失败'); } }; xhr.send(data); } var pasteImage; document.getElementById('pasteArea').addEventListener('paste', function(e) { var items = e.clipboardData.items; for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { pasteImage = items[i].getAsFile(); break; } } }); </script> </body> </html> ``` 解释一下代码: 1. 首先,我们创建了一个文本框和一个上传按钮。 2. 在 `upload()` 函数中,我们创建了一个 `FormData` 对象,将粘贴的图片转换成 `Blob` 对象,然后将它添加到 `FormData` 中。 3. 创建了一个 `XMLHttpRequest` 对象,并使用 `POST` 方法将 `FormData` 发送到服务器上的 `/upload` 路径。 4. 在 `XMLHttpRequest` 的 `onload` 回调函数中,判断服务器返回的状态码,如果是 `200`,则上传成功,否则上传失败。 5. 最后,在文本框的 `paste` 事件中,我们检查粘贴板中是否有图片,如果有,则将其转换成 `Blob` 对象,并保存在 `pasteImage` 变量中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值