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

在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 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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>"
}

 

 

 

博客分类: 
You voted 2. Total votes: 1708

添加新评论