Hiểu <kiểu đầu vào = "tệp">

Tôi đang cố gắng thu hút đầu và sử dụng hình ảnh được chọn trong một trang web.Hiểu <kiểu đầu vào = "tệp">

Hãy nói rằng tôi có một trang web đơn giản cho phép người dùng chọn một hình ảnh từ hệ thống của họ sử dụng:

<input type="file" id="userImage">

Sau đó, trong Javascript tôi có thể làm điều này để có được những tập tin:

var userImage = document.getElementById('#userImage').files[0];

Câu hỏi:

1) Bây giờ tôi có thể sử dụng userImage không? Chẳng hạn như vẽ trên canvas, hoặc tôi có cần tải nó lên máy chủ trang web trước không?

2) Nếu tôi sử dụng hình ảnh, trang web có phải tải lên mỗi lần tôi sử dụng hình ảnh đó hay không?

3) Làm cách nào để biết khi nào hình ảnh sẵn sàng sử dụng? (Đối với cùng một lý do tất cả hình ảnh nên được cài đặt sẵn vào đầu trước khi vẽ trên vải)

Cảm ơn rất nhiều sự giúp đỡ của bạn :)

Follow-up

Cám ơn câu trả lời của bạn. Vì vậy, có vẻ như nó có thể trong html5 nhưng chưa được hỗ trợ phổ quát.

Nguồn

2012-08-24 Jamie Fearon

Trong HTML4, điều này là không thể, nhưng trong HTML5 bạn sẽ có thể truy cập các tệp cục bộ bằng cách sử dụng W3 File API. Tuy nhiên, tôi không chắc chắn khi nào (và như thế nào) nó sẽ được hỗ trợ bởi các trình duyệt khác nhau. Trong firefox 14.0.1 địa phương của tôi, đoạn code sau hoạt động và mang lại các dữ liệu nhị phân của các tập tin được lựa chọn:

var reader = new FileReader() 
reader.readAsDataURL(document.getElementById('userImage').files[0]) 
alert(reader.result)

vẽ Trang sau một hình ảnh địa phương lên một canvas:

<html> 
    <body> 
    <script type="text/javascript"> 
     function doIt() { 
     var reader = new FileReader(); 
     reader.onload = (function(e) { 
      var img = new Image(); 
      img.src = e.target.result; 
      var c = document.getElementById("canvas"); 
      var ctx = c.getContext("2d"); 
      ctx.drawImage(img,10,10); 
      } 
     ); 
     reader.readAsDataURL(document.getElementById('userImage').files[0]); 
     } 
    </script> 

    <input type="file" id="userImage" /> 
    <button onclick="doIt()">Render Image</button><br/> 
    <canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/> 
    </body> 
</html>

Có lẽ bạn nên xem xét đọc 2.

Nguồn

2012-08-24 10:29:35 tbl

Cảm ơn câu trả lời của bạn. Vì vậy, có vẻ như nó có thể trong html5 nhưng chưa được hỗ trợ phổ quát. –

+1 - giải pháp và mã tốt – techfoobar

Bạn có thể tìm thông tin cập nhật về hỗ trợ API FileReader tại http://caniuse.com/#feat=filereader – garethm

-3

1) Bạn không thể mở hoặc sửa đổi hình ảnh vì các tập lệnh phía máy khách được thực hiện trong hộp cát trình duyệt. Nếu kịch bản có thể truy cập vào hệ thống tập tin hoặc các tập tin người sử dụng nó sẽ là một vấn đề an ninh

2) Không, trình duyệt gửi tập tin bản thân khối-by-block đến máy chủ từ xa

3) Xem mục 1 :)

Nguồn

2012-08-24 10:15:19 ruX

Đối với những người downvote câu trả lời này: tại thời điểm này không có hỗ trợ cho việc truy cập tệp từ ứng dụng khách – ruX

Hiểu <kiểu đầu vào = "tệp">

Trả lời

Các vấn đề liên quan