ajax上传图片

最新推荐文章于 2024-04-20 03:39:57 发布

mangrandi

最新推荐文章于 2024-04-20 03:39:57 发布

阅读量185

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/mangrandi/article/details/84321880

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、html端的代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<input type="file" name="myfiles" id="myfiles" onchange="uploadImage('myfiles',this)">
</body>
<script type="text/javascript">
function uploadImage(field,that) {
    var file = that.files[0];
    //传递表单名称，后台可以根据表单名称获取文件
    var formfield = field.replace('@','_').replace('[]','');//表单名称特殊字符转义.操作对象是china@beijing[]这类字符串
    var formdata = new FormData();
    formdata.append(formfield, file);
    XHR = new XMLHttpRequest();
    XHR.open('POST', 'baidu.addimages?&field='+formfield, true);
    XHR.onreadystatechange = function() {
        if (XHR.readyState == 4) {
            var text = XHR.responseText;
            console.log(text);
            //#####
            //#####
        }
    };
    XHR.send(formdata);
}
</script>
</html>

二、PHP端的代码

<?php
#####
public function addimg(){
     $field = $_GET['field'];
     $name    = $_FILES[$field]["name"];
     $tmpName = $_FILES[$field]["tmp_name"];
     $newName = md5_file($tmpName).'.'.pathinfo($name, PATHINFO_EXTENSION);
     $file = '../upload/images/' . $newName;
     move_uploaded_file($_FILES[$field]["tmp_name"], $file);
    echo 1;
}
#####
?>