jQuery-File-Upload 插件使用

2014年12月17日 | 标签:

作用:1、图片ajax提交 2、即时显示

插件地址:https://blueimp.github.io/jQuery-File-Upload/
实例地址:http://www.phpno.com/jQuery-File-Upload-master/demo.html

使用步骤:

1、页面引入特定的js(至少引入一下4个js)

<script src="http://btc.phpno.com/js/jquery/1.9.1.min.js?=1.03"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>

<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>

2、布置form表单

<form action="b.php" method="post">
<!-- 图片上传按钮 -->
<input id="fileupload" type="file" name="image" data-url="./a.php" multiple>
<!-- 图片展示模块 -->
<div class="files">
</div>
<div style="clear:both;"></div>
<!-- 图片上传进度条模块 -->
<div class="up_progress">
    <div class="progress-bar"></div>
</div>
<div style="clear:both;"></div>
<br/>
<button type="submit">Submit</button>
</form>

3、js编写以及css样式控制

<script type="text/javascript">
	//图片上传
	$("#fileupload").fileupload({
		dataType: 'json',
        add: function (e, data) {
        	var numItems = $('.files .images_zone').length;
        	if(numItems>=10){
        		alert('提交照片不能超过3张');
        		return false;
        	}
        	$('.up_progress .progress-bar').css('width','0px');
        	$('.up_progress').show();
        	$('.up_progress .progress-bar').html('Uploading...');
	        data.submit();
	    },
        done: function (e, data) {
        	$('.up_progress').hide();
        	$('.upl').remove();
            var d = data.result;
            if(d.status==0){
                alert("上传失败");
            }else{
            	var imgshow = '<div class="images_zone"><input type="hidden" name="imgs[]" value="'+d.msg+'" /><span><img src="'+d.msg+'"  /></span><a href="javascript:;">删除</a></div>';
            	jQuery('.files').append(imgshow);
            }
        },
        progressall: function (e, data) {
        	console.log(data);
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.up_progress .progress-bar').css('width',progress + '%');
        }
    });

	//图片删除
	$('.files').on({
		mouseenter:function(){
			$(this).find('a').show();
		},
		mouseleave:function(){
			$(this).find('a').hide();
		},
	},'.images_zone');
	$('.files').on('click','.images_zone a',function(){
		$(this).parent().remove();
	});
</script>
<style type="text/css">
/* 图片展示样式 */
.images_zone{position:relative; width:120px;height:120px; overflow:hidden; float:left; margin:3px 5px 3px 0; background:#f0f0f0;border:5px solid #f0f0f0; }
.images_zone span{display:table-cell;text-align: center;vertical-align: middle;overflow: hidden;width: 120px;height: 120px;}
.images_zone span img{width:120px; vertical-align: middle;}
.images_zone a{text-align:center; position:absolute;bottom:0px;left:0px;background:rgba(255,255,255,0.5); display:block;width:100%; height:20px;line-height:20px; display:none; font-size:12px;}
/* 进度条样式 */
.up_progress{width: 300px;height: 13px;font-size: 10px;line-height: 14px;overflow: hidden;background: #e6e6e6;margin: 5px 0;display:none;}
.up_progress .progress-bar{height: 13px;background: #11ae6f;float: left;color: #fff;text-align: center;width:0%;}
</style>

4、程序端代码编写

<?php
header('Content-type: application/json');

if($_FILES["image"]["error"]!=0){
	$result = array('status'=>0,'msg'=>'上传错误');
	echo json_encode($result);exit();
}

if( !in_array($_FILES["image"]["type"], array('image/gif','image/jpeg','image/bmp')) ){
	$result = array('status'=>0,'msg'=>'图片格式错误');
	echo json_encode($result);exit();
}

if($_FILES["image"]["size"] > 2000000){//判断是否大于2M
	$result = array('status'=>0,'msg'=>'图片大小超过限制');
	echo json_encode($result);exit();
}

$filename = substr(md5(time()),0,10).mt_rand(1,10000);
$ext = pathinfo($_FILES["image"]["name"], PATHINFO_EXTENSION);

$localName = "./imgs/".$filename.'.'.$ext;

if ( move_uploaded_file($_FILES["image"]["tmp_name"], $localName) == true) {
	$lurl = 'http://api.gongchang.com/jQuery-File-Upload-master/'.$localName;
	$result  = array('status'=>1,'msg'=>$lurl);
}else{
	$result  = array('status'=>0,'msg'=>'error');
}
echo json_encode($result);

?>

5、就此完成

注:事件监控需要使用jquery的on函数

目前还没有任何评论.


2 + nine =