ajax上传图片

向右看齐 2022-06-05 08:17 198阅读 0赞

index.html

<!DOCTYPE html>  
<html>  
    <head>  
        <title>Ajax 上传文件</title>  
        <meta charset="utf-8">  
        <script type="text/javascript">  
            var xhr;  
            function createXMLHttpRequest() \{  
                if (window.ActiveXObject) \{  
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
                \} else if (window.XMLHttpRequest) \{  
                    xhr = new XMLHttpRequest();  
                \}  
            \}  
  
            function UpladFile() \{  
                var fileObj = document.getElementById("file").files\[0\];  
                var FileController = 'doajaxfileupload.php';  
                var form = new FormData();  
                form.append("myfile", fileObj);  
                createXMLHttpRequest();  
                xhr.onreadystatechange = handleStateChange;  
                xhr.open("post", FileController, true);  
                xhr.send(form);  
            \}  
            function handleStateChange() \{  
                if (xhr.readyState == 4) \{  
                    if (xhr.status == 200 || xhr.status == 0) \{  
                        var result = xhr.responseText;  
                        var json = eval("(" + result + ")");  
                        alert('图片链接:\\n' + json.file);  
                    \}  
                \}  
            \}  
        </script>  
    </head>  
    <body>  
        <div class="form-group">  
            <label class="control-label">图片</label>  
            <br/>  
            <input type='text' name='textfield' id='textfield' class='txt' />  
            <span οnclick="file.click()" class="mybtn">浏览...</span>  
            <input type="file" name="file" class="file" id="file" size="28" οnchange="document.getElementById('textfield').value=this.value" />  
            <span οnclick="UpladFile()" class="mybtn">上传</span>  
        </div>  
    </body>  
</html>

doajaxfileupload.php

<?php  
if(isset($\_FILES\["myfile"\]))  
\{  
$ret = array();  
//$uploadDir = 'images'.DIRECTORY\_SEPARATOR.date("Ymd").DIRECTORY\_SEPARATOR;  
$uploadDir = 'uploads'.DIRECTORY\_SEPARATOR;  
$dir = dirname(\_\_FILE\_\_).DIRECTORY\_SEPARATOR.$uploadDir;  
file\_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));  
if(!is\_array($\_FILES\["myfile"\]\["name"\])) //single file  
\{  
//$fileName = time().uniqid().'.'.pathinfo($\_FILES\["myfile"\]\["name"\])\['extension'\];  
$fileName = $\_FILES\["myfile"\]\["name"\];  
move\_uploaded\_file($\_FILES\["myfile"\]\["tmp\_name"\],$dir.$fileName);  
$ret\['file'\] = DIRECTORY\_SEPARATOR.$uploadDir.$fileName;  
\}  
echo json\_encode($ret);  
\}  
?>

ajax.php

<?php  
$typeArr = array("jpg", "png", "gif","ico");  
//允许上传文件格式  
$path = "uploads/";  
//上传路径  
if (isset($\_POST)) \{  
    $name = $\_FILES\['file'\]\['name'\];  
    $size = $\_FILES\['file'\]\['size'\];  
    $name\_tmp = $\_FILES\['file'\]\['tmp\_name'\];  
    if (empty($name)) \{  
        echo json\_encode(array("error" => "您还未选择图片"));  
        exit ;  
    \}  
    $type = strtolower(substr(strrchr($name, '.'), 1));  
    //获取文件类型  
  
    if (!in\_array($type, $typeArr)) \{  
        echo json\_encode(array("error" => "清上传jpg,png或gif类型的图片！"));  
        exit ;  
    \}  
    if ($size > (500 \* 1024)) \{  
        echo json\_encode(array("error" => "图片大小已超过500KB！"));  
        exit ;  
    \}  
  
    $pic\_name = time() . rand(10000, 99999) . "." . $type;  
    //图片名称  
    $pic\_url = $path . $name;  
//    $pic\_url = $path . $pic\_name;  
    //上传后图片路径+名称  
    if (move\_uploaded\_file($name\_tmp, $pic\_url)) \{//临时文件转移到目标文件夹  
        echo json\_encode(array("error" => "0", "pic" => $pic\_url, "name" => $pic\_name));  
    \} else \{  
        echo json\_encode(array("error" => "上传有误，清检查服务器配置！"));  
    \}  
\}  
?>