Ajax上傳圖片

tinyq 發(fā)布于2019-08-02 12:08 / 3166人閱讀

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

上傳圖片input的類(lèi)型是file （如下圖）

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

?判斷是否為空如下：

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

上傳到后臺(tái)之前要先加一個(gè)form把它包起來(lái)，并添加點(diǎn)擊按鈕上傳如下：

然后是js部分? 通過(guò)ajax上傳

function upload(){
    var formData = new FormData($("#uploadForm")[0])  //創(chuàng)建一個(gè)forData 
    formData.append("img", $("#pic_img")[0].files[0]) //把file添加進(jìn)去  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就這么簡(jiǎn)單，后臺(tái)接收 name=img即可

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

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

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

相關(guān)文章

移動(dòng)端上傳圖片（ajax跨域請(qǐng)求）

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

frontoldman 2019-08-29 11:10 評(píng)論0 收藏0
移動(dòng)端上傳圖片（ajax跨域請(qǐng)求）

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

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

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

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

摘要：我相信很多使用的朋友，都有采用上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用來(lái)解決數(shù)據(jù)問(wèn)題，傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁(yè)面跳轉(zhuǎn)，而使用能夠無(wú)刷新上傳圖片等文件。我相信很多使用vuejs的朋友，都有采用ajax上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用ajax來(lái)解決數(shù)據(jù)問(wèn)題，傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁(yè)面跳轉(zhuǎn)，而使用ajax能夠無(wú)刷新上傳圖片等文件。其實(shí)已經(jīng)有朋友封裝了...

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

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

tuniutech 2019-08-19 18:30 評(píng)論0 收藏0