html网站首页 html

multiupload.js在html5下上传多图片插件

袁志蒙
2016-07-05 20:23:06
3535 次阅读
3

上传多图片，其实在PHP中是非常复杂的一个部分。很多时候，我们都不注重这一方面，但研究好它对于我们提高知识，是非常必要的！对于个人而言，学习PHP有这么多年了，对这方面还是一知半解的。

一：插件简介

然而，我们有一般有如下几个选择：

1、多个input放在一起；2、一个input数组，然后多个input；3、swfupload等一些带有flash的功能的插件；4、使用html5的 multiple="true" 属性！

对于我而言，前三个都用过，但都觉得不好用。但都有各的优点，不然它们也不会发展到如此地步。有时间我再详细分析一下上边的几个功能吧。HTML5的出现，无疑给我们带来了很多便捷之处。那么，我们怎么利用这一属性来解决我们的上传功能呢？！

multiupload.js 就是用 html5的 <input type=’file’ multiple=’true’/>这一属性结合jquery的一些功能来实现这一功能！

本人觉得还不错，于是详细研究一二！！！

1、它可以进行多图上传；

2、它可以显示上传图片的各文件的文件名称；

3、它可以拖拉上传；

二：插件作者及下载

插件作者：未知

Git下载地址： https://github.com/arunkumarsekar/Multiple_file_drag_and_drop_upload

三：兼容性

需要jquery1.7.0版以上，支持HMTL5的浏览器


IE9+	Chrome	Firefox	Opera	Safari

四：参数介绍

support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",     // 支持上传的格式form: "demoFiler",                  // Form的ID值dragArea: "dragAndDropFiles",       // 支持拖拉区域的ID值uploadUrl: "upload.php"             // 上传文件的动态路径

五：最简使用教程

使用教程思想，演示地址如下：

1、HTML代码2、JS配置3、使用JS4、写动态上传代码

（1）现在把全部代码贴下，即1，2，3

<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>第100款插件：multiupload.js在html5下上传多图片插件</title><script src="/assets/jquery/jquery-1.9.0.min.js"></script><script type="text/javascript" src="js/multiupload.js"></script><script type="text/javascript">var config = {
	support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",		// Valid file formats
	form: "demoFiler",					// Form ID
	dragArea: "dragAndDropFiles",		// Upload Area ID
	uploadUrl: "upload.php"				// Server side upload url}$(document).ready(function(){
	initMultiUploader(config);});</script><link href="css/style.css" type="text/css" rel="stylesheet" /></head><body><div id="dragAndDropFiles" class="uploadArea">
	<h1>你也可以把图片拖放到这里</h1></div><form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
	<input type="file" name="multiUpload" id="multiUpload" multiple />
	<input type="submit" name="submitHandler" id="submitHandler" value="上传" class="buttonUpload" /></form><div class="progressBar">
	<div class="status"></div></div></body></html>

（2）动态上传语言 upload.php。官方的动态代码是这么写的！

<?phpif($_SERVER['REQUEST_METHOD'] == "POST"){
	if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name'])){
		echo($_POST['index']);
	}
	exit;}?>