Filereader - upload same file again not working

后端 未结 4 573
灰色年华
灰色年华 2020-12-03 10:02

I have sth like drawing app. User can save projects and then load them. When I load first time one file (for e.g. project1.leds) make some changes in the app but no saving i

4条回答
  •  夕颜
    夕颜 (楼主)
    2020-12-03 10:31

    The only problem with the above answer is that your HTML will no longer display the file name after the upload. Instead, it will continue to say "No file chosen", which might be confusing for users.

    To get around this, you can hide the input and replace it with a label that replicates the display of the input, like so:

    HTML:

    
    No file chosen
    

    CSS:

    #myFileInput {
        display: none;
    }
    #myFileLabel {
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        margin-top: 5px;        
        padding-left: 6px;
        padding-right: 6px;
    }
    #myFileName {
        margin-left: 5px;
    }
    

    JavaScript:

    var file = null
    file = e.target.files[0];
    
    //variable to get the name of the uploaded file
    var fileName = file.name;
    //replace "No file chosen" with the new file name
    $('#myFileName').html(fileName);
    

    well explained article how to do this here: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

提交回复
热议问题