có thể xem trước hình ảnh cục bộ trước khi tải chúng lên thông qua biểu mẫu không?

Question

Để cụ thể hơn, tôi muốn sử dụng biểu mẫu có một hoặc nhiều trường nhập tệp được sử dụng cho hình ảnh. Khi các trường đó được thay đổi, tôi muốn hiển thị bản xem trước của hình ảnh được liên kết, trước khi gửi dữ liệu đến máy chủ.

Tôi đã thử một số phương pháp javascript, nhưng tôi luôn chạy vào các lỗi bảo mật. Tôi sẽ không bận tâm khi sử dụng java hoặc flash, miễn là giải pháp giảm xuống một cách duyên dáng đối với những người dùng không có chúng. (Họ sẽ không nhận được bản xem trước, và họ sẽ không nhận được một 'khó chịu' cài đặt này 'hoặc.)

Có ai thực hiện điều này một cách đơn giản, có thể tái sử dụng?

P.S. Tôi biết có một hộp cát, nhưng hộp cát phải ở trong một căn phòng tối, bị khóa với tất cả các cửa sổ bị bôi đen?

Answer 1

Here's a jQuery + PHP script để tải lên hình ảnh xem trước hình ảnh đó.

Answer 2

JavaScript không có quyền truy cập vào hệ thống tệp cục bộ vì mục đích bảo mật, thời gian.

Answer 3

Bước đầu tiên là tìm ra đường dẫn hình ảnh. JavaScript được phép thẩm tra điều khiển tải lên cho tên tệp/đường dẫn, nhưng (vì lý do bảo mật), các trình duyệt khác nhau hiển thị những thứ khác nhau cho JS engine so với hiển thị cho người dùng - chúng có xu hướng giữ nguyên tên tệp để bạn ít nhất có thể xác thực phần mở rộng của nó, nhưng bạn có thể nhận được c:\fake_path\ hoặc một số điều tương tự bị xáo trộn được thêm vào tên tệp. Việc thử điều này trên các trình duyệt khác nhau sẽ cho bạn ý tưởng về những gì được trả lại dưới dạng đường dẫn thực sự và những gì được giả mạo và ở đâu.

Bước thứ hai là hiển thị hình ảnh. Có thể hiển thị hình ảnh cục bộ nếu bạn biết đường dẫn của chúng, qua các thẻ img với file:// URL nguồn, nếu trình duyệt của người dùng cho phép sơ đồ file://. (Firefox không, theo mặc định.) Vì vậy, nếu bạn có thể yêu cầu người dùng cho bạn biết đường dẫn đầy đủ của hình ảnh là gì, bạn ít nhất có thể thử tải nó.

Answer 4

Tôi chỉ từng thấy các applet Java thực hiện việc này, ví dụ, applet tải lên hình ảnh trên Facebook. Nhược điểm của phương pháp Java là người dùng sẽ được nhắc tin tưởng applet trước khi nó chạy, đây là một loại phiền toái, nhưng điều này cho phép applet trình bày một trình duyệt tập tin với xem trước hình ảnh hoặc làm những điều thú vị hơn như cho phép người dùng để tải lên toàn bộ thư mục.

Answer 5

Không cần công cụ lạ mắt. Tất cả những gì bạn cần là chức năng createObjectURL, tạo URL có thể được sử dụng làm hình ảnh src và có thể xuất phát trực tiếp từ tệp cục bộ.

Giả sử bạn đã chọn một vài hình ảnh từ máy tính của người dùng bằng phần tử nhập tệp (<input type="file" />). Dưới đây là cách bạn tạo bản xem trước cho các tệp hình ảnh cho nó:

function createObjectURL(object) { 
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object); 
} 

function revokeObjectURL(url) { 
    return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url); 
} 

function myUploadOnChangeFunction() { 
    if(this.files.length) { 
     for(var i in this.files) { 
      var src = createObjectURL(this.files[i]); 
      var image = new Image(); 
      image.src = src; 
      // Do whatever you want with your image, it's just like any other image 
      // but it displays directly from the user machine, not the server! 
     } 
    } 
} 

Answer 6

Bạn có thể thử phương pháp này, mặc dù có vẻ như nó không hoạt động trên IE.

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

Thật đơn giản và nhanh chóng để viết mã.

tôi đặt mã ở đây chỉ trong trường hợp nguồn chết:

Script:

<!-- Assume jQuery is loaded --> 
    <script> 
     function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
      $('#img_prev') 
       .attr('src', e.target.result) 
       .width(150) 
       .height(200); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
     } 
    </script> 

Trong HTML:

<!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
     <input type='file' onchange="readURL(this);" /> 
     <img id="img_prev" src="#" alt="your image" /> 
    </body>