從文件輸入中更改圖像而不發送表格

兄弟和姐妹。從文件輸入中更改圖像而不發送表格

有沒有辦法改變IMG上的HTML使用作爲img的輸入文件標籤中的選定圖像的src而不發送包含IMG的表單到php？

我想要做的就是在發送php設置以保存用戶的配置文件之前，在頁面上看到圖像的預覽。

在此先感謝。

來源

2015-07-05 Dionisio Barboza

你需要證明你有什麼到目前爲止已經試過。 –

我開始創建頁面，但還沒有完成。 P.D .:我甚至不想爲此提供AJAX解決方案，謝謝！ –

對於可以使用FileReader API：

var inp = document.querySelector('input'); 
 
inp.addEventListener('change', function(e){ 
 
    var file = this.files[0]; 
 
    var reader = new FileReader(); 
 
    reader.onload = function(){ 
 
     document.getElementById('preview').src = this.result; 
 
     }; 
 
    reader.readAsDataURL(file); 
 
    },false);

<input type="file" accept="image/*"/> 
 
<img id="preview"/>

來源

2015-07-06 04:54:07 Kaiido

從blueimp有一個很棒的圖書館，做你想做的。你只需要導入庫：

<script src="js/load-image.all.min.js"></script>

，並設置爲[onchange事件]事件處理[4]所需的輸入，像這樣：

document.getElementById('file-input').onchange = function (e) { 
    var loadingImage = loadImage(
     e.target.files[0], 
     function (img) { 
      document.body.appendChild(img); 
     }, 
     {maxWidth: 600} 
    ); 
    if (!loadingImage) { 
     // Alternative code ... 
    } 
};

第一個參數是一個文件或Blob對象或只是一個圖像URL，第二個是一個回調，如果一切正確，您可以接收一個HTML圖像元素，並且可以調整或裁剪作爲loadImage函數的第三參數的選項映射返回的對象。

在本例中，e.target是對派發事件的對象的引用。看看File API。

重要事項：對於File或Blob對象作爲第一個參數，這僅適用於瀏覽器支持URL API或FileReader的情況。

檢查更多信息回購：blueimp/JavaScript-Load-Image

來源

2015-07-06 00:09:14

你深深知道我的真正含義！嘿Henoc tu eres el de CodigoFacilito no？ –

雖然這可能在理論上回答這個問題，但[這將是更可取的]（// meta.stackoverflow.com/q/8259）在這裏包含了答案的基本部分，並提供了供參考的鏈接。 –

對不起@RohitGupta，我是新來的回答問題:)現在好多了？ –

哦，我尋找你的問題，並發現這一點：

首先，你需要閱讀<input type="file">因此這個參考將幫助您需要這個：Reading client side text file using Javascript，在這裏他們讀取輸入並在DOM中將其寫入畫布標籤，因此您需要以下行：document.getElementById('file').addEventListener('change', readFile, false);
同樣在readFile函數您需要將文件的src分配給<img>標籤，並且類似於：

函數readFile（evt）var files = evt.target.files; var file = files [0]; var img = document.getElementById（'myimg'）; img.src = file.src; }

做一些測試並告訴我是否有效。

來源

2015-07-06 00:18:04 RokumDev

所以畫布是這個問題的主要關鍵，我從未實現過畫布，但這是一個好的開始。謝謝，對大家!!!!明天或後天，我將測試此處所述的所有答覆。 –

我採納了您的建議，並在網上衝浪尋找File API信息，那就是解決方案。謝謝 –

好的，不要忘記標記爲正確的，以便其他人輕鬆找到響應。 – RokumDev

<input type="text" class="my-input" /> 
<img src="#" class="preview" /> 

$('.my-input').on('keyup', function() { 
    $('.preview').attr('src', $(this).val()); 
});

的jsfiddle：https://jsfiddle.net/913bnkyq/

檢查img元素在開發工具中的jsfiddle看到src屬性如您在輸入類型得到實時更新。

來源

2015-07-06 00:56:52 slinhart

從文件輸入中更改圖像而不發送表格

回答

相關問題