thay đổi đầu vào tệp thay đổi img src và thay đổi màu hình ảnh

Question

sự kiện trao đổi không hoạt động. Tôi phải làm gì để có được kết quả trên cùng một trang. Tôi không muốn chuyển hướng đến bất kỳ trang nào khác để tải lên hình ảnh. Vấn đề này có phải là do opencart không? Tôi không biết nếu nó là chính xác để viết như thế này trong cPanel. Tôi đang sử dụng opencart và cPanel. Còn cách nào khác không?

HTML

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

kịch bản

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

Answer 1

Bạn cần phải gửi this đối tượng duy nhất thay vì this.value khi gọi onchange

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

vì bạn đang sử dụng input biến như this trong chức năng của bạn, giống như tại dòng

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

Working DEMO

EDIT - Hãy thử sử dụng jQuery như dưới đây -

xóa onchange khỏi trường nhập:

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

Bind onchange sự kiện vào trường nhập:

$(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

Answer 2

Hãy thử với mã này, bạn sẽ nhận được bản xem trước hình ảnh trong khi tải lên

<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'); 
} 
} 

Answer 3

trong HTML của bạn : <input type="file" id="yourFile"> đừng quên tham khảo tập tin js của bạn hoặc đặt kịch bản sau đây giữa <script></script> trong kịch bản của bạn:

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);