[removed] Upload file

前端 未结 2 815
伪装坚强ぢ
伪装坚强ぢ 2020-11-22 14:53

Let\'s say I have this element on the page:


This will create a button that allows the users

相关标签:
2条回答
  • 2020-11-22 15:27

    Pure JS

    You can use fetch optionally with await-try-catch

    let photo = document.getElementById("image-file").files[0];
    let formData = new FormData();
    
    formData.append("photo", photo);
    fetch('/upload/image', {method: "POST", body: formData});
    

    async function SavePhoto(inp) 
    {
        let user = { name:'john', age:34 };
        let formData = new FormData();
        let photo = inp.files[0];      
             
        formData.append("photo", photo);
        formData.append("user", JSON.stringify(user));  
        
        try {
           let r = await fetch('/upload/image', {method: "POST", body: formData}); 
           console.log('HTTP response code:',r.status); 
        } catch(e) {
           console.log('Huston we have problem...:', e);
        }
        
    }
    <input id="image-file" type="file" onchange="SavePhoto(this)" >
    <br><br>
    Before selecting the file open chrome console > network tab to see the request details.
    <br><br>
    <small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>
    
    <br><br>
    (in stack overflow snippets there is problem with error handling, however in <a href="https://jsfiddle.net/Lamik/b8ed5x3y/5/">jsfiddle version</a> for 404 errors 4xx/5xx are <a href="https://stackoverflow.com/a/33355142/860099">not throwing</a> at all but we can read response status which contains code)

    Old school approach - xhr

    let photo = document.getElementById("image-file").files[0];  // file from input
    let req = new XMLHttpRequest();
    let formData = new FormData();
    
    formData.append("photo", photo);                                
    req.open("POST", '/upload/image');
    req.send(formData);
    

    function SavePhoto(e) 
    {
        let user = { name:'john', age:34 };
        let xhr = new XMLHttpRequest();
        let formData = new FormData();
        let photo = e.files[0];      
        
        formData.append("user", JSON.stringify(user));   
        formData.append("photo", photo);
        
        xhr.onreadystatechange = state => { console.log(xhr.status); } // err handling
        xhr.open("POST", '/upload/image');    
        xhr.send(formData);
    }
    <input id="image-file" type="file" onchange="SavePhoto(this)" >
    <br><br>
    Choose file and open chrome console > network tab to see the request details.
    <br><br>
    <small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>
    
    <br><br>
    (the stack overflow snippets, has some problem with error handling - the xhr.status is zero (instead of 404) which is similar to situation when we run script from file on <a href="https://stackoverflow.com/a/10173639/860099">local disc</a> - so I provide also js fiddle version which shows proper http error code <a href="https://jsfiddle.net/Lamik/k6jtq3uh/2/">here</a>)

    SUMMARY

    • In server side you can read original file name (and other info) which is automatically included to request by browser in filename formData parameter.
    • You do NOT need to set request header Content-Type to multipart/form-data - this will be set automatically by browser.
    • Instead of /upload/image you can use full address like http://.../upload/image.
    • If you want to send many files in single request use multiple attribute: <input multiple type=... />, and attach all chosen files to formData in similar way (e.g. photo2=...files[2];... formData.append("photo2", photo2);)
    • You can include additional data (json) to request e.g. let user = {name:'john', age:34} in this way: formData.append("user", JSON.stringify(user));
    • This solutions should work on all major browsers.
    0 讨论(0)
  • 2020-11-22 15:39

    Unless you're trying to upload the file using ajax, just submit the form to /upload/image.

    <form enctype="multipart/form-data" action="/upload/image" method="post">
        <input id="image-file" type="file" />
    </form>
    

    If you do want to upload the image in the background (e.g. without submitting the whole form), you can use ajax:

    • Asynchronous file upload (AJAX file upload) using jsp and javascript
    • jQuery Ajax File Upload
    • Ajax using file upload
    0 讨论(0)
提交回复
热议问题