Kéo và thả hình ảnh vào biểu mẫu web

Question

Chúng tôi có một trang web (HTML javascript và PHP chủ yếu) cho phép người dùng tải lên hình ảnh. Chúng ta có nút duyệt bình thường, và nó hoạt động tốt. Tuy nhiên, chúng tôi muốn thêm chức năng để kéo và thả hình ảnh vào trường văn bản thay thế.

gmail cho phép bạn thực hiện việc này trong ứng dụng thư của họ, vì vậy, điều đó là có thể. Cách duy nhất chúng tôi nghĩ là làm một applet java làm tất cả những điều này, nhưng điều đó kết thúc là rất lộn xộn.

Có onyone thực hiện việc này? làm thế nào nó hoạt động?

Chỉnh sửa: Tôi đang sử dụng firefox trên máy Mac. Hầu hết người dùng của tôi có thể sẽ sử dụng IE trên Windows.

nhờ

Answer 1

tôi đã cố gắng kéo một giảm và hình ảnh biên tập viên của họ. Nó sẽ chọn đường dẫn nếu tệp trên một trang web, nhưng nếu nó nằm trên ổ đĩa cục bộ của bạn, đường dẫn sẽ là "tệp: // c: ....", sẽ không được tải lên với thư và sẽ kết thúc như một hình ảnh bị hỏng.

Trình duyệt không có quyền truy cập vào hệ thống tệp cục bộ, vì lý do bảo mật, vì vậy tôi nghi ngờ điều này sẽ hoạt động theo cách bạn mô tả.

Answer 2

Thả một tập tin vào một lĩnh vực đầu vào bình thường sẽ sao chép các đường địa phương để các hình ảnh vào lĩnh vực đầu vào, tuy nhiên điều này là vô giá trị đối với bạn kể từ khi sở hữu .Value của một < input type = 'file' Thẻ > chỉ đọc vì lý do bảo mật.

Bạn sẽ nhận thấy rằng gmail chỉ cho phép bạn kéo/thả hình ảnh (để tải lên) lên đầu vào < loại đầu vào = 'tệp' > và không phải bất kỳ trường nào khác.

Tôi nghĩ điều bạn muốn hỏi là "how do I style a <input type='file'> tag like google", là một chủ đề hoàn toàn khác.

EDIT: Ok trong IE bạn không thể kéo một tập tin vào một loại < input = 'file' > thẻ

Answer 3

Bạn có thể làm điều này trong XUL (Làm cho nó có hiệu quả là giải pháp chỉ dành cho Firefox) hoặc trong ActiveX (Giải pháp chỉ dành cho IE).

Answer 4

cách tốt nhất để có được điều này làm là để tạo ra một độc Adobe AIR như trình tải ảnh lên cho https://www.photoshop.com/express

---

bạn có thể tìm thấy một số thông tin tuyệt vời tại bài đăng này: http://devzone.zend.com/article/3650-Desktop-Image-Uploaders-Using-Adobe-AIR-and-JavaScript

Answer 5

Tôi nghĩ tôi có một cách xung quanh các vấn đề hệ thống tập tin địa phương gây phiền nhiễu FF3 địa ngục nhưng tôi cần một đoạn javascript để kiểm tra với. Làm cách nào để đọc đường dẫn tệp cục bộ từ biểu mẫu tải lên tệp? Xin vui lòng, dừng lại với 'flash là một giải pháp'. Tôi là một nhà phát triển Flash bởi thương mại và thậm chí tôi không nghĩ rằng đó là một giải pháp tốt.

Answer 6

Bạn có vô tình cài đặt tiện ích Firefox này không?

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

Tôi sẽ ngạc nhiên nếu có một giải pháp mà không cần phải cài đặt một plugin bên ngoài hoặc gia hạn. Như ai đó đã đề cập đó sẽ là một vấn đề an ninh. Một trang web sẽ có thể lấy các tập tin từ máy tính của người dân và tải lên chúng mà họ không biết.

Answer 7

Kiểm tra khung SWELL. Javascript của nó dựa.

Answer 8

Đây là một câu hỏi cũ, nhưng nó xuất hiện trong kết quả tìm kiếm của tôi.

Vì vậy, để tham khảo, hãy sử dụng các lớp tệp HTML5 và Kéo và thả.

Bài viết có chi tiết tại đây: http://www.html5rocks.com/en/tutorials/file/dndfiles/