php+jq(plupload插件)+ajax多图上传并入库

最新推荐文章于 2021-03-12 19:31:00 发布

跨省少年

最新推荐文章于 2021-03-12 19:31:00 发布

阅读量3.4k

点赞数

分类专栏： php jquery

本文链接：https://blog.csdn.net/u010089432/article/details/51862997

版权

php 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

1.以前用的是swfupload 现在想换个插件就用plupload了文档自己可以搜这里我就不多说了，本来想找个例子，毕竟也是第一次搞，下个demo还要积分，可怜没有，只有自己写一个demo了没有演示希望能帮到别人。上代码：（由于例子比较粗糙，不要喷我啊！）

index.php (引入html页面和接收表单数据)

if($_POST['111']){
var_dump($_POST['file']);exit;
}

include("custom.html");

html代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Plupload - Custom example</title>

<script type="text/javascript" src="../js/plupload.full.min.js"></script>

<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>



</head>

<body style="font: 13px Verdana; background: #eee; color: #333">

<h1>Custom example</h1>

<br />

<form action="custom.php" method="post" enctype="multipart/form-data" runat="server">

<input type="text" name="111">

<div id="container">

<a id="pickfiles" href="javascript:;">[Select files]</a>

<ul id="ul_pics" class="ul_pics clear"></ul>

</div>

<input type="submit" value="提交" />

</form>

<br />

<pre id="console"></pre>

<script type="text/javascript">

// Custom example logic

var uploader = new plupload.Uploader({

//上传插件初始化选用那种方式的优先级顺序

runtimes : 'html5,flash,silverlight,html4',

//上传按钮

browse_button : 'pickfiles', // you can pass an id...

container: document.getElementById('container'), // ... or DOM Element itself

url : 'upload.php', //远程上传地址

flash_swf_url : '../js/Moxie.swf', flash文件地址

silverlight_xap_url : '../js/Moxie.xap', //silverlight文件地址

filters : {

max_file_size : '500kb',

mime_types: [

{title : "Image files", extensions : "jpg,gif,png"},

{title : "Zip files", extensions : "zip,rar"}

]

},

//true:ctrl多文件上传, false 单文件上传

multi_selection: true,

init: {

// PostInit: function() {

// document.getElementById('filelist').innerHTML = '';

// document.getElementById('uploadfiles').onclick = function() {

// uploader.start();

// return false;

// };

// },

//文件上传前

FilesAdded: function(up, files) {

// plupload.each(files, function(file) {

// document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';

// });

if ($("#ul_pics").children("li").length > 4) {

alert("您上传的图片太多了！");

uploader.destroy();

} else {

var li = '';

plupload.each(files,

function(file) { //遍历文件

li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";

});

$("#ul_pics").append(li);

uploader.start();

}

},

//进度条

// UploadProgress: function(up, file) {

// document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";

// },

//文件上传成功的时候触发

FileUploaded: function(up, file, info) {

var data = JSON.parse(info.response);

//传值到隐藏域

$("#" + file.id).html("<div class='img'><img height='100px' width='100px' src='" + data.pic + "'/><a href='javascript:' οnclick='delimg(this)'>delimg</a><input type='hidden' name='file[]' value='"+data.pic+"' /></div>");

},

Error: function(up, err) {

document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));

//alert(err.message);

}

}

});

uploader.init();

//删除

function delimg(aa) {

$(aa).parent('.img').remove();

}

</script>

</body>

</html>

upload.php:

$typeArr = array("jpg", "png", "gif");//允许上传文件格式
$path = "uploads/";//上传路径

if (isset($_POST)) {
$name = $_FILES['file']['name'];
$size = $_FILES['file']['size'];
$name_tmp = $_FILES['file']['tmp_name'];
if (empty($name)) {
echo json_encode(array("error"=>"您还未选择图片"));
exit;
}
$type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型

if (!in_array($type, $typeArr)) {
echo json_encode(array("error"=>"清上传jpg,png或gif类型的图片！"));
exit;
}
if ($size > (500 * 1024)) {
echo json_encode(array("error"=>"图片大小已超过500KB！"));
exit;
}

$pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称
$pic_url = $path . $pic_name;//上传后图片路径+名称
// var_dump(move_uploaded_file($name_tmp, $pic_url));exit;
if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹
echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name));
} else {
echo json_encode(array("error"=>"上传有误，清检查服务器配置！"));
}
}

好了，大概就这些，格式我也不弄了，你要本地测试直接复制代码就ok了。

a):存放图片的 uploads文件夹如果你没有自己建的话，自己手动创建下，防止没有权限。