Thay thế cho biểu mẫu tải lên Ajax được lồng trong một biểu mẫu khác

Question

Tôi có biểu mẫu HTML để chỉnh sửa chi tiết của một người trong hệ thống cơ sở dữ liệu mà tôi có tại nơi làm việc của mình. Một phần của biểu mẫu cho phép người dùng tải lên hình ảnh của người đó. Tuy nhiên, điều này khiến tôi gặp rắc rối, bởi vì tôi đang cố làm cho biểu mẫu trở thành Ajax-y hơn bằng cách cho phép người dùng tải lên hình ảnh và xem nó được tải lên thành công trước khi họ gửi các chi tiết của người đó. Phần mà đem lại cho tôi rắc rối là nó dường như đòi hỏi một hình thức lồng nhau (có nghĩa là, hình thức upload bên trong các chi tiết hình), như vậy:

<form name="details"> 
    <input name="detail1"> 
    <input name="detail2"> 
    <form name="pictureupload"> 
     <input type="file" name="pic"> 
     <input type="submit" name="upload" value="Upload"> 
    </form> 
    <input type="submit"> 
</form> 

Cách tôi hy vọng để làm cho nó làm việc là người dùng sẽ điền thông tin chi tiết của biểu mẫu, chọn ảnh và nhấn nút "Tải lên", sau đó thực hiện cập nhật AJAX khi tệp được tải lên để họ có thể xem ảnh trước khi nhấn nút "Gửi" cuối cùng.

Có cách nào tốt để có biểu mẫu tải lên ở bên trong biểu mẫu chi tiết (ít nhất là trong hình thức trên trang) nhưng không được lồng bên trong biểu mẫu chi tiết trong HTML không?

Answer 1

Bạn không được phép có biểu mẫu lồng nhau trong HTML hợp lệ. Ngoài ra, tệp tải lên thông qua các đối tượng XMLHTTPRequest (kỹ thuật AJAX phổ biến nhất) không hoạt động trong hầu hết các trình duyệt.

Tất cả sẽ không bị mất. Đối với các bản tải lên AJAX, bạn sẽ cần phải sử dụng IFRAME, như được trình bày tại đây: http://www.webtoolkit.info/ajax-file-upload.html

Cách tiếp cận tôi sẽ đề xuất cho biểu mẫu là chia thành ba phần tử form. Bạn sẽ có một biểu mẫu chứa các trường trước biểu mẫu tải lên, biểu mẫu tải lên và biểu mẫu chứa các trường sau biểu mẫu tải lên. Biểu mẫu đầu tiên sẽ không có nút gửi. Các trường trong biểu mẫu đầu tiên được nhân đôi ở dạng thứ ba, dưới dạng đầu vào bị ẩn. Khi nút gửi biểu mẫu cuối cùng được bấm, một số javascript sẽ chạy sẽ sao chép dữ liệu trường từ biểu mẫu đầu tiên vào thứ ba, do đó, nó được gửi với biểu mẫu cuối cùng.

Ví dụ, HTML của bạn có thể trông như thế này ::

<form name="details1"> 
    <input id="fake_detail1" name="detail1" type="text"/> 
    <input id="fake_detail2" name="detail2" type="text"/> 
</form> 
<form name="pictureupload"> 
    <input type="file" name="pic"> 
    <input type="submit" name="upload" value="Upload"> 
</form> 
<form name="details2"> 
    <input id="detail1" name="detail1" type="hidden"/> 
    <input id="detail2" name="detail2" type="hidden"/> 
    <input id="detail3" name="detail3" type="text"/> 
    <input type="submit"> 
</form> 

Answer 2

Bạn có thể đặt các hình thức "lồng" trong một vị trí trên trang và chỉ hiển thị khi người dùng của bạn nhấp chuột vào một "Upload Picture. .. ".

Biểu mẫu lồng nhau có thể ẩn ban đầu. Có một số cửa sổ bật lên rất đẹp cho phép bạn hiển thị biểu mẫu lồng nhau trên biểu mẫu bên ngoài và cho phép người dùng tải lên biểu mẫu lồng nhau một cách độc lập.

<div id="nestedform"> 
    <form name="pictureupload"> 
     <input type="file" name="pic"> 
     <input type="submit" name="upload" value="Upload"> 
    </form> 
</div> 

<div id="mainform"> 
<form name="details"> 
    <input name="detail1"> 
    <input name="detail2"> 
    <a href="#" onclick="Code to pop up the nested form">Upload Picture...</a> 
    <input type="submit"> 
</form> 
</div>