1.圖片上傳到服務(wù)器。
2.后臺(tái)將圖片地址傳到html頁(yè)面，以圖片形式展現(xiàn)。
3.后天將圖片地址加入到input表單中，表單處于隱藏狀態(tài)。
4.前端刪除圖片，通過(guò)js操作，移除圖片與表單數(shù)據(jù)。
5.圖片上傳表單，是單獨(dú)的。不能嵌套在總的表單中。
6.牛逼的圖片上傳，可以對(duì)圖片進(jìn)行處理。壓縮，加水印等。
7.點(diǎn)擊btn，觸發(fā)圖片點(diǎn)擊，圖片改變之后，觸發(fā)圖片表單提交。
點(diǎn)擊按鈕
div id="up_status" style="display:none">[站外圖片上傳中……(2)]/div>
div id="up_btn" class="carousel-btn">
span>添加圖片/span>
/div>
div id="carousel-preview">/div>
上傳表單
form id="imageform" class="hidden" method="post" enctype="multipart/form-data" action="{sh::U('Goods/carouselUpload')}">
input id="carousel-photoimg" type="file" name="photoimg">
/form>
觸發(fā)事件
$("#up_btn").click(function () {
$("#carousel-photoimg").click();
});
$('#carousel-photoimg').on('change', function(){
var status = $("#up_status");
var btn = $("#up_btn");
$("#imageform").ajaxForm({
target: '#carousel-preview',
beforeSubmit:function(){ // 提交前，用加載的圖片顯示
status.show();
btn.hide();
},
success:function(){ // 提交后，加載的圖片顯示
status.hide();
btn.show();
},
error:function(){
status.hide();
btn.show();
} }).submit();
});
后端驗(yàn)證與處理
function carouselUpload() {
$path = "Uploads/Store/goods/".date("Ymd").'/';
if (!file_exists($path)) {
mkdir($path, 0777, true);
}
$extArr = array("jpg", "png", "gif","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(empty($name)){
echo '請(qǐng)選擇要上傳的圖片';
exit;
}
$ext = $this->extend($name);
if(!in_array($ext,$extArr)){
echo '圖片格式錯(cuò)誤！';
exit;
}
if($size>(2000*1024)){
echo '圖片大小不能超過(guò)2M';
exit;
}
$image_name = time().rand(100,999).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$image_name)){
echo 'div class="carousel-container" onclick="deleteImg(this);">
[站外圖片上傳中……(3)]
input name="goodsimg[]" value="'.$path.$image_name.'" type="hidden">
[站外圖片上傳中……(4)]
/div>';
}else{
echo '上傳出錯(cuò)了！';
}
exit;
}
exit;
}
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
return $extend;
}
刪除圖片文件
function deleteImg(obj) {
$(obj).remove();
// ajax 刪除圖片文件
var src = $(obj).data('src');
$.ajax({
type: "POST",
url: "{sh::U('Goods/deleteImg')}",
data: "src="+src,
success: function(msg){}
});
}
// 刪除圖片，避免造成空間不足
public function deleteImg() {
if (IS_AJAX) {
$src = $this->_post('src');
if(!unlink($src))
{
echo "文件{$src}刪除失敗";
}
else
{
echo "文件{$src}刪除成功";
}
}
}
以上內(nèi)容是小編給大家介紹的Ajax上傳圖片的本質(zhì)的相關(guān)資料，希望對(duì)大家以上幫助！
您可能感興趣的文章:- PHP+jQuery+Ajax實(shí)現(xiàn)多圖片上傳效果
- 自己動(dòng)手打造ajax圖片上傳(網(wǎng)上沒(méi)有的)
- php+ajax實(shí)現(xiàn)圖片文件上傳功能實(shí)例
- swfupload ajax無(wú)刷新上傳圖片實(shí)例代碼
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- JQuery+ajax實(shí)現(xiàn)批量上傳圖片(自寫)
- Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼
- Javascript異步表單提交，圖片上傳，兼容異步模擬ajax技術(shù)
- php ajax無(wú)刷新上傳圖片實(shí)例代碼
