圖片上傳前預覽，兩種方式可實現

Cristalven 發布于2019-06-28 13:35 / 1249人閱讀

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

表單提交，前端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("上傳數據為空");
        }
        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;//全局變量
//文件上傳觸發
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云服務器 asp上傳前預覽 js文件上傳前預覽 php 預覽上傳圖片上傳圖片預覽php

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/25739.html

圖片上傳前預覽，兩種方式可實現

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

cnio 2019-08-01 17:30 評論0 收藏0
圖片上傳前預覽，兩種方式可實現

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

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

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

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

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

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

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

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