PlayFramework: Ajax + Kéo n 'Drop + File Upload + Đối tượng tệp trong bộ điều khiển?

Question

Có ai biết cách tải tệp lên qua Ajax và sử dụng kéo thả n 'từ màn hình nền có hỗ trợ khả năng của PlayFramework để chuyển đổi tệp tải lên thành đối tượng Tệp không?

Tôi đã thử một số phương pháp khác nhau và không có phương thức nào hoạt động chính xác.

Answer 1

Dưới đây là nỗ lực thành công của tôi:

Chỉnh sửa các tuyến đường tập tin và thêm

POST /upload         Application.upload 

Bộ điều khiển của chúng tôi là Application, Tôi sẽ sử dụng nó để đơn giản.

Chỉnh sửa của bạn lớp điều khiển ứng dụng

public static void upload(String qqfile) { 


if (request.isNew) { 

    FileOutputStream moveTo = null; 

    Logger.info("Name of the file %s", qqfile); 
    // Another way I used to grab the name of the file 
    String filename = request.headers.get("x-file-name").value(); 

    Logger.info("Absolute on where to send %s", Play.getFile("").getAbsolutePath() + File.separator + "uploads" + File.separator); 
    try { 

     InputStream data = request.body; 


     moveTo = new FileOutputStream(new File(Play.getFile("").getAbsolutePath()) + File.separator + "uploads" + File.separator + filename); 
     IOUtils.copy(data, moveTo); 

    } catch (Exception ex) { 

     // catch file exception 
     // catch IO Exception later on 
     renderJSON("{success: false}"); 
    } 

} 


renderJSON("{success: true}"); 
} 

Sửa Application.html của bạn trong app/views/thư mục Application/gói

#{extends 'main.html' /} 
#{set title:'Multiple Uploads' /} 

<div id="file-uploader"> 
    <noscript> 
     <p>Please enable JavaScript to use file uploader.</p> 
     <!-- or put a simple form for upload here --> 
    </noscript> 

    <script> 
     function createUploader(){ 
      var uploader = new qq.FileUploader({ 
       element: document.getElementById('file-uploader'), 
       action: '/upload', 
       debug: true 
      }); 
     } 

     // in your app create uploader as soon as the DOM is ready 
     // don't wait for the window to load 
     window.onload = createUploader; 
    </script>  
</div> 

Chỉnh sửa bố cục chính của bạn: main.html , nằm trong thư mục/gói ứng dụng/lượt xem và thêm dòng này sau jQuery

<script src="@{'/public/javascripts/client/fileuploader.js'}" type="text/javascript"></script> 

ghi chú cuối cùng Hãy nhớ để tải về kịch bản từ AJAX Upload Valums, thưởng thức!

Bạn cũng có thể grab the source here.

Tôi đã thử nghiệm nó trong các trình duyệt khác nhau nó hoạt động cho tôi ít nhất. Tín dụng cho Riyad trong Play! danh sách người gợi ý cho tôi về request.body

P.S gửi thư: Tôi đang sử dụng một trong tôi được đăng là một lời nhận xét trước khi

Sửa Câu trả lời với mã đã được thêm vào theo chỉ dẫn của T.J.Crowder, tôi đồng ý :)

Answer 2

Không thực sự chắc chắn điều này sẽ đủ điều kiện làm câu trả lời vì tôi không chắc chắn trăm phần trăm sẽ hoạt động. Nhưng nó nên hoạt động :)

Nếu tôi hiểu chính xác, bạn muốn kéo tệp từ máy tính để bàn và thả chúng vào vùng thả ở đâu đó trong trình duyệt của bạn. Điều này kích hoạt cuộc gọi tải lên ajax đến máy chủ phát.

Tôi có phần thứ hai hoạt động, sử dụng bài đăng jquery thẳng. Các tập tin được nhận tốt. Đối với phần đầu tiên, tôi muốn thử sử dụng sự hỗ trợ DND trong html 5 (di chuyển xuống Kéo Files):

http://www.html5rocks.com/tutorials/dnd/basics/

Answer 3

Phần upload đơn giản (không kéo & thả chỉ cần nhấp vào "tải lên một tập tin") không được làm việc với IE7 & 8 (đừng cố người khác tức là)

Xem getting Java Bad File Descriptor Close Bug while reading multipart/form-data http body