帶動態加載功能的jQuery圖片上傳

我有一張圖片，我想上傳一張圖片作爲商店頁面。只需單擊它，顯示上傳框，然後在選擇圖像時自動提交，並用新上傳的項目替換一個圖像。帶動態加載功能的jQuery圖片上傳

這是當前頁面佈局，沒有實際的上傳按鈕。在圖片的點擊，我們將向用戶PC上上傳窗口：

這是代碼在HTML領域

<div class="uploader"> 
    <form method="POST" id="upload_image"> 
     <img src="/img/upload.png" id="imageUpload" alt="upload" /> 
    </form> 
</div>

所以一旦表單提交，使用Ajax請求的高亮區域，當它返回併成功時，我計劃將圖像名稱（通常是當前time()作爲文件名）存儲爲會話變量，現在我需要在上傳過程發生時顯示Loading...圖像，然後用位於圖像中的新圖像替換imageUpload/img/thumbs/NEWIMAGENAMEHERE.png。

提問時間 是否有一個jQuery函數，我可以用它來替換圖像加載圖像，然後加載的圖像一旦上傳完成？是否有像這樣的單張圖片上傳jQuery圖書館？所有圖書館的我都找到了多張圖片的工作，而且由於我們只支持這個商店佈局中的一張圖片，所以我們不希望多張圖片上傳。

感謝來自@

來源

2017-01-16 Kaboom

看一看dropzone.js – osanger

感謝病檢查出來 – Kaboom

我在看https://plugins.jquery.com/singleuploadimage/爲好。關於這個插件的任何知識？我在發佈後才發現它。 – Kaboom

由於建議aron9forever我已經決定，而不是上傳的圖像馬上在它自己的，我想簡單地顯示圖像，然後上載的形式提交。這確實會造成令人討厭的問題，即當他們提交表單時，如果出現問題，他們需要重新點擊上傳圖像，但我可能會使用$ _POST變量來解決這個問題。

<div class="uploader"> 
    <img id="imagetoUpload" src="/com/img/upload.png" alt="upload"> 
</div> 
<input type="file" id="productImage" style="display:none;" name="img" value="">

使用這個jQuery

$(function() { 
    function readURL(input) { 
     if(input.files && input.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       $('#imagetoUpload').attr('src', e.target.result); 
      } 
      reader.readAsDataURL(input.files[0]); 
     } 
    }; 
    $("#productImage").change(function(){ 
     readURL(this); 
    }); 
    $("#imagetoUpload").click(function() { 
     $("input[id='productImage']").click(); 
    }); 
});

來源

2017-01-16 16:15:23 Kaboom

帶動態加載功能的jQuery圖片上傳

回答

相關問題