HTML5:多文件上传 Upload multiple files at once with HTML5, jQuery and PHP
来源:互联网 发布:知乎课程的定义 编辑:程序博客网 时间:2024/04/30 02:18
The HTML
Nothing too fancy here, but do pay attention to the multipart attribute on the input element of type of file. This essentially tells the application to expect multiple files instead of a maximum of one.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>File Upload in PHP</title>
- <!--[if IE]>
- <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <link href="css/default.css" rel="stylesheet" type="text/css" />
- <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <div class="la-anim-10"></div><!-- .corner-preloader -->
- <div id="wrapper">
- <div id="upload-widget">
- <h1>
- <i class="fa fa-cloud-upload"></i> File Uploader
- </h1>
- <form id="file-upload-form">
- <div class="file-input-wrap">
- Browse Files
- <input type="file" name="file" id="file" multiple>
- </div><!-- .file-input-wrap -->
- </form><!-- #file-upload-form -->
- </div><!-- #upload-widget -->
- <div id="upload-result">
- </div><!-- #upload-result -->
- </div><!-- #wrapper -->
- <div id="preloader">
- <img src="img/preloader.gif" alt="files uploading..." />
- </div>
- <!-- SCRIPTS -->
- <script type="text/javascript" src="js/libraries/jquery-2.1.1.min.js"></script>
- <script type="text/javascript" src="js/custom.js"></script>
- </body>
- </html>
Note also the scripts at the bottom of the html markup. You will need the jQuery library and some jQuery code which will come later. This will sit in the custom.js
file.
PHP Code
Next comes the PHP code. In your favorite code editor program (I used Sublime Text 3 for this) create a new file and call it file-upload.php
. In there we simply loop through the $_FILES array given to us by PHP and for each entry we do what needs to be done!
- <?php
- // loop through the array of files
- foreach($_FILES as $index => $file)
- {
- // for easy access
- $fileName = $file['name'];
- // for easy access
- $fileTempName = $file['tmp_name'];
- // check if there is an error for particular entry in array
- if(!emptyempty($file['error'][$index]))
- {
- // some error occurred with the file in index $index
- // yield an error here
- return false;
- }
- // check whether file has temporary path and whether it indeed is an uploaded file
- if(!emptyempty($fileTempName) && is_uploaded_file($fileTempName))
- {
- // move the file from the temporary directory to somewhere of your choosing
- move_uploaded_file($fileTempName, "uploads/" . $fileName);
- // mark-up to be passed to jQuery's success function.
- echo '<p>Click <strong><a href="uploads/'%20.%20$fileName%20.%20'" target="_blank">' . $fileName . '</a></strong> to download it.</p>';
- }
- }
- ?>
jQuery custom code
We will handle the submitting of the form via jQuery, we will also handle what exactly gets sent. Let us being by creating a file named custom.js
and inside we will place the following code:
- $(function() {
- // grab the file input and bind a change event onto it
- $('#file').bind("change", function() {
- // new html5 formdata object.
- var formData = new FormData();
- //for each entry, add to formdata to later access via $_FILES["file" + i]
- for (var i = 0, len = document.getElementById('file').files.length; i < len; i++) {
- formData.append("file" + i, document.getElementById('file').files[i]);
- }
- //send formdata to server-side
- $.ajax({
- url: "file-upload.php", // our php file
- type: 'post',
- data: formData,
- dataType: 'html', // we return html from our php file
- async: true,
- processData: false, // tell jQuery not to process the data
- contentType: false, // tell jQuery not to set contentType
- success : function(data) {
- $('#upload-result').append('<div class="alert alert-success"><p>File(s) uploaded successfully!</p><br />');
- $('#upload-result .alert').append(data);
- },
- error : function(request) {
- console.log(request.responseText);
- }
- });
- });
- });
Note that we make use of HTML5’s FormData
, so this will not work on older browsers. Always check caniuse.com for browser compatibilities.
In the HTML, ensure the referenced paths to the ‘custom.js’ file is correct. In my case, I have my custom.js
file sitting inside a folder called js
. I also have my ‘file-upload.php’ sitting next to my html file.
That is it! We are done. You now have a file input that can handle the upload of multiple files are once.
Note: If you are developing on your local machine and you’re using WAMP or XAMP, there are certain restrictions set in the php.ini
file. These basically limit the size of the files to be uploaded and also how much time is allowed for a file to be uploaded. If you plan on uploading big files, ensure you update those settings to meet your need.
原文:http://www.code-hound.com/upload-multiple-files-at-once-with-jquery-and-php/
转自:HTML5:多文件上传 Upload multiple files at once with HTML5, jQuery and PHP
- HTML5:多文件上传 Upload multiple files at once with HTML5, jQuery and PHP
- Multiple Files Upload in ASP.NET and ASP.NET with jQuery
- html5 multiple多文件异步上传 服务器接收文件重复
- JQuery上传插件 HTML5 upload断点续传上传插件
- CSRF with upload – XHR-L2, HTML5 and Cookie replay
- Html5 File Upload with Progress
- 在ASP.NET中实现多文件上传(三)---jQuery Multiple File Upload Plugin
- HTML5 File Reader file upload 文件上传 test
- html5多文件上传
- upload.php --->文件上传
- AjaxControlToolkit Multiple Files Upload
- multiple file upload 多文件上传精典
- js html5 上传文件、多文件,服务器 端php
- HTML5 FormData 进行文件jquery ajax 上传
- HTML5中用 jQuery + Ajax 上传文件
- HTML5中用 jQuery + Ajax 上传文件
- HTML5上传文件jQuery.form.js
- php 文件上传 (html5 flash 进度条 XXXXXX)
- Chart控件,chart、Series、ChartArea曲线图绘制的重要属性介绍
- 仿微信主界面
- virtualbox 使用主机的共享文件夹
- app每月签到功能简单实现
- java单例模式总结
- HTML5:多文件上传 Upload multiple files at once with HTML5, jQuery and PHP
- 捕捉右滑返回手势
- C++学习
- 初步理解Android Fragment
- springMvc
- IOS定制应用程序图标
- 函数声明
- WebPack系列教程(八):DEV TOOLS
- Android学习笔记——Fragment