页面中实现无刷新上传文件

Posted by quentin 在 Friday, 3 May 2013

在web中实现无刷新上传文件有几种方式：

1. 使用HTML5中的FormData和fileReader实现。但是这种方式受限于浏览器。如：IE只适用于IE10。

可参考：http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

2. 使用隐藏的iframe提交。

可参考：http://confi.blog.51cto.com/5271328/1174071

最近，在Drupal 7里发现内容类型（content type）为image的字段都可以实现无刷新上传。所以很想知道它是怎么实现的。经过研究发现，其实Drupal7内引入了一个js lib——jquery.form.js。

使用挺简单的：

index.html

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(); 
        }); 
    </script> 
</head> 

<body>
  <form id="myForm" action="upload.php" method="post"> 
      <input type="file" name="images[]"/><BR>
      <input type="file" name="images[]"/><BR>
      
      <input type="submit" value="Submit Comment" /> 
  </form>
</body>
</html>

upload.php

<?php  
$invalid = 0;

foreach ($_FILES["images"]["error"] as $key => $error) {  
    if ($error == UPLOAD_ERR_OK) {  
        $name = $_FILES["images"]["name"][$key];  
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);  
    } else {
      $invalid++;
    }
}  
  
if (! $invalid) {
  echo "<h2>Successfully Uploaded Images</h2>";  
} else {
  echo "<h2>Something error.</h2>";  
}

博客分类:

PHP

Javascript

HTML/CSS