Ajax如何實現(xiàn)上傳圖片-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“Ajax如何實現(xiàn)上傳圖片”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“Ajax如何實現(xiàn)上傳圖片”這篇文章吧。

創(chuàng)新互聯(lián)建站專注于潼關(guān)網(wǎng)站建設(shè)服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供潼關(guān)營銷型網(wǎng)站建設(shè)，潼關(guān)網(wǎng)站制作、潼關(guān)網(wǎng)頁設(shè)計、潼關(guān)網(wǎng)站官網(wǎng)定制、微信小程序服務，打造潼關(guān)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供潼關(guān)網(wǎng)站排名全網(wǎng)營銷落地服務。

1.圖片上傳到服務器。

2.后臺將圖片地址傳到html頁面，以圖片形式展現(xiàn)。

3.后天將圖片地址加入到input表單中，表單處于隱藏狀態(tài)。

4.前端刪除圖片，通過js操作，移除圖片與表單數(shù)據(jù)。

5.圖片上傳表單，是單獨的。不能嵌套在總的表單中。

6.牛逼的圖片上傳，可以對圖片進行處理。壓縮，加水印等。

7.點擊btn，觸發(fā)圖片點擊，圖片改變之后，觸發(fā)圖片表單提交。

點擊按鈕

<div id="up_status" >[站外圖片上傳中……(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();
});

后端驗證與處理

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 '請選擇要上傳的圖片';
exit;
}
$ext = $this->extend($name);
if(!in_array($ext,$extArr)){
echo '圖片格式錯誤！';
exit;
}
if($size>(2000*1024)){
echo '圖片大小不能超過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 '上傳出錯了！';
}
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}刪除成功";
}
}
}

以上是“Ajax如何實現(xiàn)上傳圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標題：Ajax如何實現(xiàn)上傳圖片-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://muchs.cn/article0/dchjoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站制作、微信小程序、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)