Uploading file with unique constraints

I am looking for a simple way to do a file upload, but unfortunately with a set of unique constraints:

1. I have an event handler for a button click. In this event handler, I would like to make some call to pop up the "Browse for File" dialog box (which is a native OpenFileDialog box). Users would navigate and select a file to upload. Once users click on the OK button, a post request will be sent to the server.

2. When the post request lands on the server, a fully qualified file name (i.e. with full path) is in one of the params of the post request.

3. I prefer not to have form (at least not explicitly, dynamically and temporarily generated in an iframe or whatever is OK). There's no element in my HTML, and no flash is allowed, so something like Uploadify can not be considered. Ajax Upload (http://valums.com/ajax-upload/) can not also be considered because it wants an element already exists in the DOM. I on the other hand want t开发者_开发百科o handle the uploading once the event handler kicks in.

4. Progress bar, multiple file uploading are NOT required.

---

Just create the element dynamically inside the handler, and use AjaxUpload after that.

---

You cannot do that with only JS+HTML. You'll need at least something like Flash or Silverlight or Java.

---

First, create an input element after some button click, and then trigger a click on the file element to open the native file box.

// this is callback function
var file = document.createElement('input');
file.setAttribute('type', 'file');

// bind change event.
file.onchange = function () {
    // see step second.
}
file.click();

Then, ajax upload the file. Use iframe, formData or any other plugins as you like.

var formData = new FormData();
formData.append('upfile', this.files[0]);

The rest you can google.