ajax上传图片

来源：互联网发布：mac如何安ps 编辑：程序博客网时间：2024/06/11 04:24

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 onclick="file.click()" class="mybtn">浏览...</span>
           <input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById('textfield').value=this.value" />
           <span onclick="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" => "上传有误，清检查服务器配置！"));
   }
}
?>

阅读全文

0 0