最新消息:

第100款插件:multiupload.js在html5下上传多图片插件

图片幻灯插件 杨红伟 4218浏览 0评论

一:插件简介

上传多图片,其实在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

本站官网演示地址: http://www.ijquery.cn/demo/multiupload/Official

本站下载地址: http://www.ijquery.cn/demo/multiupload/multiupload.zip

三:兼容性

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

IE Chrome Firefox Opera Safari
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"             // 上传文件的动态路径

五:最简使用教程

使用教程思想,演示地址如下: http://www.ijquery.cn/demo/multiupload/local/demo1.php

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

(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。官方的动态代码是这么写的!

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

不这有了这些代码,我们完全可以把文件上传目录下,即upload.php下的 uploads 文件夹!

六:上传的数据库

其实我不想那么多,我就是想将input内容上传到数据库是怎么一回事儿?因为这款插件无法返回数组,看不到相关内容!所以只能从 upload.php 这个文件入手!

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址