页面中实现无刷新上传文件
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
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 > // 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>" ; } |
博客分类:
添加新评论