圖片上傳前預(yù)覽，兩種方式可實現(xiàn)

cnio 發(fā)布于2019-08-01 17:30 / 462人閱讀

摘要：表單提交，前端上傳頭像后臺接收提交，前端添加圖片添加失敗后臺接收上傳圖片上傳數(shù)據(jù)為空上傳成功提交，前端全局變量文件上傳觸發(fā)

表單提交，前端html:

后臺接收：

file("image")) && $this->validate !== "Users.pass")
        {
            $this["image"] = $this->upload($this["uid"]);
            $this->validate(false)->setEvent(false)->save($this->data);
        }
    }
    protected function upload($id)
    {
        $file = Request::instance()->file("image");
        $image = $file->move(IMAGE_PATH,$id);
        if($image){
            return VIEW_IMAGE_PATH . "/" . $image->getSaveName();
        }
    }
?>

ajax提交，前端html:

后臺接收：

file("file");
        if(empty($file)){
            $this->error("上傳數(shù)據(jù)為空");
        }
        else{
            $info = $file->move(IMAGE_PATH."/temp/",time().rand(100,999));
            if($info == false){
                $this->error($file->getError());
            }
            else{
                $image = VIEW_IMAGE_PATH."/temp/".$info->getSaveName();
                $this->success("上傳成功",null,$image);
            }
        }
    }
?>

ajax提交，前端html


    




var imgId;//全局變量
//文件上傳觸發(fā)
function upload(id) {
    $("#file").trigger("click");
    imgId = id;
}
$("#file").on("change",function () {
    $("#fileForm").ajaxSubmit(function (result) {
        if(result.code){
            $("#img"+imgId).find("ul img").attr("src", result.data);
            $("#img"+imgId).find("ul input").val(result.data);
        }
        else {
            layer.alert(result.msg,{icon:2});
        }
        $("#file").val("");
    });
});

GPU云服務(wù)器云服務(wù)器 asp上傳前預(yù)覽 js文件上傳前預(yù)覽 php 預(yù)覽上傳圖片上傳圖片預(yù)覽php

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51184.html

相關(guān)文章

圖片上傳前預(yù)覽，兩種方式可實現(xiàn)

摘要：表單提交，前端上傳頭像后臺接收提交，前端添加圖片添加失敗后臺接收上傳圖片上傳數(shù)據(jù)為空上傳成功提交，前端全局變量文件上傳觸發(fā) 表單提交，前端html: /**上傳頭像**/ $(#avatar).click(function () { $(#image).trigger(click); }); $(#image).on(change, fu...

Cristalven 2019-06-28 13:35 評論0 收藏0
圖片上傳前預(yù)覽，兩種方式可實現(xiàn)

摘要：表單提交，前端上傳頭像后臺接收提交，前端添加圖片添加失敗后臺接收上傳圖片上傳數(shù)據(jù)為空上傳成功提交，前端全局變量文件上傳觸發(fā) 表單提交，前端html: /**上傳頭像**/ $(#avatar).click(function () { $(#image).trigger(click); }); $(#image).on(change, fu...

NervosNetwork 2019-08-20 18:58 評論0 收藏0
移動端上傳圖片翻轉(zhuǎn)的解決方案

摘要：后續(xù)過了幾天，公司購置了幾臺全新的測試機，測試同學(xué)將系統(tǒng)在一臺三星的機子上一測，又發(fā)現(xiàn)新問題了選擇完圖片進行本地預(yù)覽時，發(fā)現(xiàn)圖片翻轉(zhuǎn)了但上傳后再展示又是正常的。最近在處理移動端選擇圖片實時預(yù)覽并上傳時遇到一個問題：上傳前圖片預(yù)覽正常，但上傳到服務(wù)器上的圖片展示到頁面上時，有時會出現(xiàn)圖片翻轉(zhuǎn)的問題，一般是翻轉(zhuǎn) 90 度。后經(jīng)一翻研究找到了問題所在，特在此記錄一下。問題描述接上面提到...

shinezejian 2019-08-19 17:15 評論0 收藏0
上傳圖片本地預(yù)覽效果實現(xiàn)（兼容IE8）

摘要：以上傳圖片為例。我們可以通過獲取上傳的圖片相關(guān)信息，但是想要實現(xiàn)本地預(yù)覽還需要借助來實現(xiàn)可以讀取本地圖片，并將圖片數(shù)據(jù)轉(zhuǎn)換成編碼的字符串形式嵌入到頁面中。在我們實現(xiàn)上傳圖片的效果里，就有用到。圖片預(yù)覽兼容處理及以下版本不支持和。最近項目里需要用到上傳圖片并預(yù)覽的功能，于是寫了個jQuery預(yù)覽圖片插件，下載地址。如果有需要的，可以直接下載。第一次寫jQuery插件，如有不對之處，歡迎...

avwu 2019-08-20 16:54 評論0 收藏0
上傳圖片實時預(yù)覽

摘要：引入當(dāng)使用上傳圖片文件時，如何在上傳到服務(wù)器之前，在本地進行預(yù)覽對象對象允許應(yīng)用程序異步讀取用戶計算機上的文件。引入當(dāng)使用上傳圖片文件時，如何在上傳到服務(wù)器之前，在本地進行預(yù)覽？ FileReader 對象 FileReader對象允許Web應(yīng)用程序異步讀取用戶計算機上的文件。使用new創(chuàng)建一個FileReader實例對象： let fileReader = new FileRea...

sourcenode 2019-08-22 16:00 評論0 收藏0