onchange文件輸入更改img src並更改圖像顏色

onchange事件不起作用。我應該怎麼做才能在同一頁面上獲得結果。我不想重定向到任何其他頁面上傳圖片。這個問題是因爲opencart嗎？我不知道在cPanel中這樣寫是否正確。我正在使用opencart和cpanel。有沒有其他方法？onchange文件輸入更改img src並更改圖像顏色

HTML

<input type='file' id="upload" onchange="readURL(this.value)" /> 
    <img id="img" src="#" alt="your image" />

腳本

function readURL(input) { 
var url = input.value; 
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase(); 
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 
     $('#img').attr('src', e.target.result); 
    } 
    reader.readAsDataURL(input.files[0]); 
} 
else{ 
    $('#img').attr('src', '/assets/no_preview.png'); 
    } 
}

JSFiddle

來源

2014-07-19 Jill

有你的問題解決了 –

@logan肯定。 http://jsfiddle.net/stN8U/1/這解決了我的問題謝謝。 – Jill

如果提供的答案有幫助，請接受更適合您的答案。 –

您需要發送this對象改爲只this.value同時呼籲平變化

<input type='file' id="upload" onchange="readURL(this)" />

，因爲你正在使用input變量作爲this在你的功能，如在線路

var url = input.value;// reading value property of input element

Working DEMO

編輯 - 嘗試使用jQuery像下面 -

從輸入字段中刪除onchange：

<input type='file' id="upload" >

綁定onchange事件輸入字段：

$(function(){ 
    $('#upload').change(function(){ 
    var input = this; 
    var url = $(this).val(); 
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase(); 
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
    { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#img').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
    else 
    { 
     $('#img').attr('src', '/assets/no_preview.png'); 
    } 
    }); 

});

jQuery Demo

來源

2014-07-19 07:03:26

http://jsfiddle.net/M3kj6/1/和http://jsfiddle.net/stN8U/1/都適合我。謝謝。也有關於如何更改圖像顏色的任何建議只有閃光燈或Photoshop是選擇這個或有任何其他選項？ – Jill

是的，這將工作，最終你綁定到文件輸入和調用功能（這是做任務的其餘部分）的變化事件。我在我的回答中提到的同樣的事情，但把所有的代碼裏面綁定函數，而不是在單獨的javascrpt函數。 –

對不起，我不知道如何更改圖像的顏色。可能你比我更瞭解，對此感到遺憾。 –

嘗試使用此代碼，您將獲得的圖像預覽，而在你的HTML上傳

<input type='file' id="upload" onChange="readURL(this);"/> 
<img id="img" src="#" alt="your image" /> 

function readURL(input){ 
var ext = input.files[0]['name'].substring(input.files[0]['name'].lastIndexOf('.') + 1).toLowerCase(); 
if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     $('#img').attr('src', e.target.result); 
    } 

    reader.readAsDataURL(input.files[0]); 
}else{ 
    $('#img').attr('src', '/assets/no_preview.png'); 
} 
}

來源

2014-07-21 18:55:15

：<input type="file" id="yourFile"> 不要忘記引用您的js文件或者把<script></script> 之間下面的腳本在腳本：

var fileToRead = document.getElementById("yourFile"); 

fileToRead.addEventListener("change", function(event) { 
    var files = fileToRead.files; 
    var len = files.length; 
    // we should read just one file 
    if (len) { 
     console.log("Filename: " + files[0].name); 
     console.log("Type: " + files[0].type); 
     console.log("Size: " + files[0].size + " bytes"); 
    } 

}, false);

來源

2015-04-02 21:05:59 Yacine

onchange文件輸入更改img src並更改圖像顏色

回答

相關問題