Have a file input form upload when a user clicks “open”

喜夏-厌秋 提交于 2019-12-30 14:08:29

问题


I am wondering if this flow is possible:

  1. Click a button that says "Upload". It is styled very differently from the usual . It does not show the "No file selected" text.

  2. The usual file browser pops open. The user chooses a file to upload. They click the "open" button in the file browser.

  3. Upon clicking "open", the file browser is closed (like normal) and the file immediately begins uploading (unlike normal where it requires a submit).

  4. I detect when the file is finished uploading, and direct to another page.

Here is how I would try to implement it:

  1. Custom CSS on input button - this doesn't seem to hard.
  2. No changes needed
  3. Detect when the input value is changed. Once I detect that it has changed, trigger a submit.
  4. ???? How can I detect when a file is finished uploading?

回答1:


If you use a form submit, the file finished uploading when the (likely POST) request is complete.

To trigger the submit when the input value change, use form.submit() in JavaScript.

$('#file_input').change(function() {
    $(this).closest('form').submit();
});

Your server should send back the redirect as a response (e.g. status code 301, 302, 303, etc.).




回答2:


Depends on how you are thinking to implement it. But here's what I did in one of my projects.

Step 1 Uploaded the file using Ajax :

upload file using jquery ajax How to upload a file using jQuery.ajax and FormData Google

Step 2 On upload finish, my server-side script returns a JSON - Depends on what server-side language you're using.

Step 3 I parse that json to see if the upload was successful and then take necessary steps



来源:https://stackoverflow.com/questions/19692220/have-a-file-input-form-upload-when-a-user-clicks-open

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!