Nhận dữ liệu hình ảnh nhị phân từ kiểu đầu vào "tệp" sử dụng JavaScript/jQuery để sử dụng với xem trước hình ảnh với AJAX trong WebMatrix

Question

Tôi gặp sự cố khi nghiên cứu hoặc tìm cách khác (nếu có thể) để nhận dữ liệu hình ảnh nhị phân sử dụng JavaScript/jQuery từ phần tử đầu vào html của tệp kiểu.

Tôi đang sử dụng WebMatrix (C#), nhưng có thể không cần thiết phải biết rằng, nếu mục đích của câu hỏi này có thể được trả lời bằng cách sử dụng JavaScript/jQuery một mình.

Tôi có thể chụp ảnh, lưu nó vào cơ sở dữ liệu (dưới dạng dữ liệu nhị phân), sau đó hiển thị pic trên trang, từ dữ liệu nhị phân, sau khi đăng. Điều này không, tuy nhiên, để lại cho tôi mà không có một bản xem trước pic, trước khi tải lên, mà tôi gần như chắc chắn tôi phải sử dụng AJAX.

Một lần nữa, điều này thậm chí không thể, nhưng miễn là tôi có thể lấy dữ liệu hình ảnh nhị phân, tôi tin rằng tôi có thể đẩy nó vào máy chủ bằng AJAX và xử lý hình ảnh theo cùng cách tôi sẽ dùng từ một cơ sở dữ liệu (lưu ý rằng tôi không lưu các tập tin hình ảnh bản thân bằng cách sử dụng GUID và tất cả điều đó, tôi chỉ lưu dữ liệu nhị phân).

Nếu có cách dễ dàng hơn để hiển thị xem trước pic bằng phần tử đầu vào, điều đó sẽ hoạt động tốt, tất nhiên, vì toàn bộ ý tưởng đằng sau tôi cố gắng thực hiện điều này là hiển thị xem trước pic trước khi chúng gửi nút biểu mẫu (hoặc ít nhất là tạo ảo tưởng đó).

** * ** * ****CẬP NHẬT* ** * ** * ****

tôi làm không coi đây là một bản sao của một câu hỏi khác bởi vì, câu hỏi thực sự của tôi là:

Làm cách nào để lấy dữ liệu hình ảnh từ loại tệp "đầu vào", với JavaScript/jQuery?

Nếu tôi chỉ có thể lấy dữ liệu (đúng định dạng) trở lại máy chủ, tôi có thể làm việc với nó ở đó và sau đó trả lại bằng AJAX (mặc dù, tôi hoàn toàn không có chuyên gia AJAX). Có, theo nghiên cứu mà tôi đã thực hiện, KHÔNG CÓ CÁCH để xem trước hình ảnh trong tất cả các phiên bản IE chỉ sử dụng javascript (điều này là do chúng ta thấy rằng đường dẫn tệp đầy đủ có thể là nguy cơ bảo mật) . Tôi có thể yêu cầu người dùng thêm trang web vào trang web đáng tin cậy, nhưng bạn thường không yêu cầu người dùng giả mạo các loại cài đặt đó (chưa kể cách nhanh nhất để làm cho trang web của bạn có vẻ đáng ngờ đối với người dùng là yêu cầu họ trực tiếp thêm trang web của bạn vào danh sách các trang web đáng tin cậy. Điều đó giống như việc gửi email và yêu cầu mật khẩu. "Chỉ cần tin tôi đi! Tôi soooo an toàn!" :)

Answer 1

Câu trả lời ngắn: Sử dụng jQuery form plugin, nó hỗ trợ AJAX giống như biểu mẫu gửi ngay cả khi tải lên tệp.

tl; dr

Thumbnail preview là trang web phổ biến thường được thực hiện bởi một số bước, về cơ bản các trang web làm các bước sau:

1. tải lên các hình ảnh RAW
2. Resize và tối ưu hóa hình ảnh để lưu trữ dữ liệu
3. Tạo liên kết tạm thời tới tệp đó (thường được lưu trữ trong máy chủ duy trì phiên HTTP)
4. Gửi lại cho người dùng, để bật ' preview'
5. Trên thực tế lưu trữ các hình ảnh sau khi người dùng khẳng định hình ảnh

Một số giải pháp xấu là:

1. Hầu hết các trình duyệt hiện đại có các tùy chọn để cho phép truy cập kịch bản các tập tin địa phương, nhưng thông thường bạn không yêu cầu người dùng của bạn nhắn tin với các cài đặt cấp thấp đó.
2. Internet Explorer trước đó (ah ... có thật là xấu hổ) và phiên bản cũ của trình duyệt hiện đại sẽ hiển thị đường dẫn tệp đầy đủ bằng cách đọc hộp 'giá trị' của tệp đầu vào, bạn có thể trực tiếp tạo thẻ và sử dụng giá trị đó . (Bây giờ nó được thay thế bởi một số c:/fakepath/... điều.)
3. Sử dụng Adobe Flash để bắt chước bảng chọn tệp, nó có thể đọc tệp cục bộ một cách chính xác. Nhưng chuyển nó vào JavaScript là một chủ đề khác ...

Hy vọng điều này sẽ hữu ích. ;)

CẬP NHẬT

Tôi thực sự đi qua một tình huống đòi hỏi phải có một bản xem trước trước khi tải lên, tôi muốn cũng phải đặt nó ở đây. Như tôi có thể nhớ lại, không có phiên bản chuyển tiếp nào trong các trình duyệt hiện đại không triển khai FileReader trước khi che đường dẫn tệp thực, nhưng hãy sửa tôi nếu có. Giải pháp này sẽ phục vụ hầu hết các trình duyệt, miễn là chúng được hỗ trợ bởi jQuery.

// 1. Listen to change event 
$(':file').change(function() { 
    // 2. Check if it has the FileReader class 
    if (!this.files) { 
    // 2.1. Old enough to assume a real path 
    setPreview(this.value); 
    } 
    else { 
    // 2.2. Read the file content. 
    var reader = new FileReader(); 

    reader.onload = function() { 
     setPreview(reader.result); 
    }; 

    reader.readAsDataURL(); 
    } 
}); 

function setPreview(url) { 
    // Do preview things. 
    $('.preview').attr('src', url); 
}