<ul id="wcqgk"></ul>

Ajax上傳圖片

DoINsiSt 發(fā)布于2019-08-23 13:43 / 1738人閱讀

摘要：上傳圖片的類型是如下圖當(dāng)我們選擇圖片文件時如下判斷是否為空如下為空不為空上傳到后臺之前要先加一個把它包起來，并添加點擊按鈕上傳如下點擊上傳然后是部分通過上傳創(chuàng)建一個把添加進去命名為成功失敗就這么簡單，后臺接收即可

上傳圖片input的類型是file （如下圖）

當(dāng)我們選擇圖片文件時如下：

?判斷是否為空如下：

if($("#pic_img").val() == ""){
    //為空
}else{
    //不為空
}

上傳到后臺之前要先加一個form把它包起來，并添加點擊按鈕上傳如下：

然后是js部分? 通過ajax上傳

function upload(){
    var formData = new FormData($("#uploadForm")[0])  //創(chuàng)建一個forData 
    formData.append("img", $("#pic_img")[0].files[0]) //把file添加進去  name命名為img
    $.ajax({
        url: /api/v1/xxxx,
        data: formData,
        type: "POST",
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
             //成功
        },
        error: function() {
              //失敗
        }
      })
}

OK就這么簡單，后臺接收 name=img即可

GPU云服務(wù)器云服務(wù)器 ajax上傳圖片 ajax上傳文件 ajax文件上傳 ajax上傳進度條

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99454.html

相關(guān)文章

移動端上傳圖片（ajax跨域請求）

摘要：項目開發(fā)簡述項目需求上傳圖片并展示。做是為了給后臺傳值。上傳截圖點擊更換提交數(shù)據(jù)判斷需要填寫的參數(shù)是否為空，如果不為空直接往下走，直到成功提交數(shù)據(jù)。優(yōu)點確實提高上傳速度。缺點后臺查看提交的圖片，模糊不清晰。第一次寫項目開發(fā)經(jīng)驗，望擔(dān)待。除了前端以外的事就不叨叨了，下面開始弄干活（兩個頁面首頁、列表頁）。項目開發(fā)簡述項目需求：上傳圖片并展示。項目地址：項目的鏈接地址開發(fā)工具：su...

frontoldman 2019-08-29 11:10 評論0 收藏0
移動端上傳圖片（ajax跨域請求）

摘要：項目開發(fā)簡述項目需求上傳圖片并展示。做是為了給后臺傳值。上傳截圖點擊更換提交數(shù)據(jù)判斷需要填寫的參數(shù)是否為空，如果不為空直接往下走，直到成功提交數(shù)據(jù)。優(yōu)點確實提高上傳速度。缺點后臺查看提交的圖片，模糊不清晰。第一次寫項目開發(fā)經(jīng)驗，望擔(dān)待。除了前端以外的事就不叨叨了，下面開始弄干活（兩個頁面首頁、列表頁）。項目開發(fā)簡述項目需求：上傳圖片并展示。項目地址：項目的鏈接地址開發(fā)工具：su...

Donald 2019-08-20 10:24 評論0 收藏0
thinkPHP利用ajax異步上傳圖片并顯示、刪除

摘要：近來學(xué)習(xí)的過程中，項目中有個發(fā)帖功能，選擇主題圖片。如下利用原始的文件上傳處理，雖然通過原始語句能實時顯示上傳圖片，但是這樣的話會涉及很多兼容問題。使用技術(shù)，實現(xiàn)選擇性刪除所選圖片功能，并不會有兼容問題。近來學(xué)習(xí)tp5的過程中，項目中有個發(fā)帖功能，選擇主題圖片。如下： showImg(https://segmentfault.com/img/bVbhraB?w=799&h=321);...

LucasTwilight 2019-07-01 10:45 評論0 收藏0
vuejs使用FormData，ajax上傳圖片文件

摘要：我相信很多使用的朋友，都有采用上傳圖片的需求，因為前后端分離后，我們希望都能用來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會導(dǎo)致提交成功后頁面跳轉(zhuǎn)，而使用能夠無刷新上傳圖片等文件。我相信很多使用vuejs的朋友，都有采用ajax上傳圖片的需求，因為前后端分離后，我們希望都能用ajax來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會導(dǎo)致提交成功后頁面跳轉(zhuǎn)，而使用ajax能夠無刷新上傳圖片等文件。其實已經(jīng)有朋友封裝了...

zollero 2019-08-20 18:34 評論0 收藏0
nodejs express圖片上傳前后端配置講解

摘要：默認(rèn)地，表單數(shù)據(jù)會編碼為。就是說，在發(fā)送到服務(wù)器之前，所有字符都會進行編碼空格轉(zhuǎn)換為加號，特殊符號轉(zhuǎn)換為值。提交說明文件上傳。圖片選擇圖片地址上傳上傳。用表單直接構(gòu)造對象就不需要下面的方法來為表單進行賦值了。 nodejs圖片上傳 nodejs一般開發(fā)網(wǎng)站基本都用express框架，本文也主要以express為例，講解如何上傳圖片；express本身沒有上傳圖片功能；一般都是集成相應(yīng)的...

tuniutech 2019-08-19 18:30 評論0 收藏0