單圖上傳:
html:
<input type="file" id="up_img" name="file"/> // 上傳按鈕
<input id="path_a" name="imgpath_a" type="hidden" value=''/> //返回路徑
![](__ASSETS__/images/uploadfile.png) // 圖片顯示
js:
<script src="__ASSETS__/js/ajaxfileupload.js" type="text/javascript"></script>
<script>
$(function(){
$("body").on("change","#up_img",function(){
$.ajaxFileUpload({
url : "{:U('Console/Console/files')}", //submit to UploadFileServlet
secureuri : false,
dataType : 'text', //返回的文本類型
fileElementId : 'up_img', //file 的 ID
success : function(data) {
$("#path_a").val('/'+data); //把返回的路徑放到要提交的input中 data是返回的路勁
$("#imgShow").attr("src",'/'+data); //顯示圖片
},
});
})
})
</script>
處理圖片上傳
public function files(){
if($_FILES['file']['error'] == 0){
$type_array = array('image/jpeg','image/pjpeg','image/gif','image/png','application/octet-stream');
if($_FILES['file']['size'] <= 3000000){ //判斷圖片大小
$name = $_FILES['file']['name'];
$name_arr = explode('.', $name);
$new_name = time().uniqid().'.'.$name_arr[count($name_arr)-1];
$path = 'Public/Console/images/admin/'.date('Y',time()).'/'.date('m',time()); //上傳圖片路徑
$new_path = $path.'/'.$new_name;
if(!is_dir($path)){
mkdir($path,0777,true);
}
if(move_uploaded_file($_FILES['file']['tmp_name'],$new_path)){
echo $new_path;die; //返回路徑
}else{
echo "<script>alert('上傳圖片失斪缓浮窖贤!')</script>";
}
}else{
echo "<script>alert('上傳圖片過大儒飒!')</script>";
}
}
}
多圖上傳 和單圖沒啥區(qū)別毡咏,就是循環(huán)上傳
html:
<input type="file" id="up-img" multiple="multiple" name="file[]" class="aaa"/> //multiple="multiple"要有這個
<input type="hidden" id="path" name="imgpath">
js:
<script>
$(function(){
var j = 0; //申明這個是循環(huán)顯示圖片的時候剃允,給圖片已個能找到它的東西
$("body").on("change",".aaa",function(){
var f = $("#up-img").val();
$.ajaxFileUpload({
url : "{:U('Console/Console/filesall')}", //submit to UploadFileServlet
secureuri : false,
dataType : 'text',
fileElementId : 'up-img',
success : function(data) {
var path = $("#path").val();
var newpath = path+data;
$("#path").val(newpath);
var str=data.substring(0,data.length-1) //返回回來的路徑最后多著一個逗號
var arr=str.split(',');
for(var i=0;i<arr.length;i++){ //循環(huán)顯示圖片
$("#imgshow").append("<div style='float:left;width:150px;height:150px;margin-right:10px;margin-bottom:10px;position:relative;' id='divimg"+j+"'>![]("+arr[i]+")<a style='position:absolute;right:0;top:0;background:#ccc;color:#fff;width:22px;height:22px;text-align: center;line-height:22px;cursor:pointer;' onclick='clearimg("+j+")'>×</a></div>");
j++
}
},
})
})
})
</script>
處理多圖圖片上傳
public function filesall(){
$i = 0;
$length = count($_FILES['file']['name']);
$img = array();
for($i;$i<$length;$i++){ //接收過來的東西教翩, 處理一下
$img[$i]['name'] = $_FILES['file']['name'][$i];
$img[$i]['type'] = $_FILES['file']['type'][$i];
$img[$i]['tmp_name'] = $_FILES['file']['tmp_name'][$i];
$img[$i]['error'] = $_FILES['file']['error'][$i];
$img[$i]['size'] = $_FILES['file']['size'][$i];
}
foreach ($img as $v){ //循環(huán)上傳
if($v['error'] == 0){
$type_array = array('image/jpeg','image/pjpeg','image/gif','image/png','application/octet-stream');
if($v['size'] <= 5000000){
$name = $v['name'];
$name_arr = explode('.', $name);
$new_name = time().uniqid().'.'.$name_arr[count($name_arr)-1];
$path = 'Public/Console/images/admin/'.date('Y',time()).'/'.date('m',time());
$new_path = $path.'/'.$new_name;
if(!is_dir($path)){
mkdir($path,0777,true);
}
if(move_uploaded_file($v['tmp_name'],$new_path)){
$ppp .= '/'.$new_path.','; //循環(huán)里面用逗號拼接一下字符串
}else{
echo "<script>alert('上傳圖片失敻擞隆!')</script>";
}
}else{
echo "<script>alert('上傳圖片過大饱亿!')</script>";
}
}
}
if($ppp){ //返回上傳后的路勁
echo $ppp;die;
}
}