使用 html 和 javascript 自定义上传文件

Question

https://jsfiddle.net/yugxqopz/

I am a newbie to UI world and I have a simple use case like

1) upload the document using choose file option
2) After it is chosen, I need to call a particular function in javascript like below

<form id="fileUploadForm" onsubmit="return uploadToTempFolder();" enctype="multipart/form-data">
    <input type="file" name="file" id="file" accept="application/pdf">
    <input type="submit" class="button-blue" value="Upload">
</form> 

Instead of choose file, I need to have an option like 'attach file' and once the user chooses the file, I don't need an extra upload button and I need to call the 'uploadToTempFolder'

Any help is appreciated.

Thanks,
Harry

Answer 1

you just need to put onchange event.

<form id="fileUploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="file" accept="application/pdf" onchange="uploadToTempFolder()">
</form> 

unfortunately we can not change the default text of file input but there is workaround.

here is working example