File Upload without using the file upload control in Javascript

Question

I am uploading a file in my application using a html file upload control now. Instead of file upload control,on selecting checkbox controls I need to fetch the file from local disk.I am using Javascript code in my application.Can Anyone help me out in this.

Use a hidden file upload control , and onclick of checkbox , trigger the file upload click — REDEVI_, Jul 08 '16 at 11:31
Can you share some code? Is the fie already populated when you click the checkbox? — Sinan Guclu, Jul 08 '16 at 11:42

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

You can use the FormData javascript object https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects but just modern browsers will have that one. For older browsers you can use a iframe How to make Asynchronous(AJAX) File Upload using iframe?

edited May 23 '17 at 12:16

Community

1
1

answered Jul 08 '16 at 11:49

Wilmer

138
1
8

score 0 · Answer 2 · answered Jul 08 '16 at 12:00

You can use a hidden file upload control and manipulate it using JavaScript. I use the code below to allow the user to select a profile image and see it in place before uploading. I use a link, but you can change it to a checkbox like you requested:

function LoadImage() {
  document.getElementById("ImageFile").click();
}

function DisplayImage(FileBrowser) {
  if (FileBrowser.files.length < 1)
    return;
  var file = FileBrowser.files[0].name;
  if (file == null || file == "")
    return;
  var reader = new FileReader();
  reader.onload = function() {
    document.getElementById("ImageDisplay").src = this.result;
  };
  reader.readAsDataURL(FileBrowser.files[0]);
}

<input id="ImageFile" type="file" style="visibility: hidden; height : 0; width: 0;" onchange="DisplayImage(this);" />
<a href="javascript: void LoadImage();">
  <img id="ImageDisplay" alt="Select an image" src="" />
</a>

Thanks for the code.I just want to avoid the manual selection of the file.Instead I want to select the file as a back end process.Is this possible.The file path and file name will be static. — Smith, Jul 08 '16 at 13:11
Selecting a file MUST be a manual process because web browsers don't have access to the file system for security and privacy reasons. The only way to do it in a web browser is to include a binary executable such as a Java Applet which can access the file system, but it has to be trusted by the user. — Racil Hilan, Jul 08 '16 at 14:22

File Upload without using the file upload control in Javascript

2 Answers2