这是一款非常好用的tp5的上传图片。话不多说直接上代码
首先引进js:
<script type="text/javascript" src="js/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
html代码:
<li>
<a href="javascript:;">
<img src="{$default_path}/images/icon8.png" alt="">图片
<input type="file" name="pic" id="fbtp" class="fbtp">
</a>
</li>
js实现代码:
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'upload',
url: "{:url('/wap/index/remarktp')}",
flash_swf_url: '__STATIC__/wap/js/plupload/Moxie.swf',
silverlight_xap_url: '__STATIC__/wap/js/plupload/Moxie.xap',
filters: {
max_file_size: '5000kb',
mime_types: [{
title: "files",
extensions: "jpg,png,gif,jpeg,mp4,PNG,JPG,JPEG,GIF,MP4"
}]
},
multi_selection: true,
init: {
FilesAdded: function(up, files) {
//判断上传图片不能超过9张
var count = files.length;
if (count>9){
alert('最多上传9张图片!');
uploader.files.splice(uploader.files.length-files.length, files.length);
uploader.stop();
return false;
}else{
var li = '';
li = "<li class='remark_pic'></li>";
$("#remark_pic").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) {
// layer.load();
},
FileUploaded: function(up, file, info) {
var data = eval("(" + info.response + ")");
$(".OdPopLayer_fbword").addClass('show');
$(".remark_pic").append("<li class='pic_list' style='width:98px;margin:4px 4px 0 0;float:left; cursor:pointer' id='"+ data.id +"'><a data-val='"+data.id+"' οnclick='qxsc("+data.id+")' class='pic_delete' style='float:left;margin-left:79px;display:inline-block;position:absolute; cursor:pointer'><img src='{$default_path}/images/close.png'></a><div id='"+data.id +"' style='background:url(" + data.pic + ") no-repeat center center;height: 98px;background-size: cover!important;'></div><input class='filename' id='i" + data.id + "' type='hidden' name='art_img_more[]' value='" + data.pic + "'/></li>");
},
Error: function(up, err) {
layer.close(layer.load());
alert('上传图片过大或图片格式不对,请重新上传!');
uploader.files.splice(uploader.files.length-files.length, files.length);
}
}
});
uploader.init();
//移除图片
$(document).on('click','.pic_list a.pic_delete',function(){
$(this).parent().remove();
var toremove = '';
var id=$(this).attr("data-val");
for(var i in uploader.files){
if(uploader.files[i].id === id){
toremove = i;
}
}
uploader.files.splice(toremove, 1);
console.log("XXX"+$(this).attr("data-val"));
var abc=$("#remark_p").find("li").length;
if(abc<1){
$("#P_ImgBtn").removeClass('show');
}
});
php的方法:
public function upload(){
$file = request()->file('file');
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'. DS .'avatar');
if($info){
echo json_encode(array("error"=>"0","pic"=>DS .'public' . DS .'uploads'. DS .'avatar'. DS .$info->getSaveName(),"name"=>$info->getFilename()));
}else{
echo $file->getError();
}
}
直接把这些代码放进去就可以了