how to invoke html control event without html control

Question

Is it possible to invoke fileupload event at button click?

I need something like this

  <input type="button" onclick="return buttonClicked()">

And invoking fileupload event should come inside buttonClicked() event

 function buttonClicked()
     {
       preventDefault();
       ...File upload event
     }

I have been searching for this functionality for some time and it seems quite a simple functionality but couldn't find any solution for this.

really need help on this one

Are you just trying to trigger an event, or do you want to actually upload a file? — Evan Davis, May 05 '15 at 15:28
@Mathletics triggering an event is the first step. Of course I need to upload file(s) — user786, May 05 '15 at 15:29

Raishul · Answer 1 · 2015-05-05T15:31:53.833

You may use following jQuery Plugin:

jQuery site link: https://plugins.jquery.com/uploadfile/

Github link: https://github.com/hayageek/jquery-upload-file

The pluging exposes following events as callback:

$("#aDivforUpload").uploadFile({
    url: "http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",
    multiple: true,
    fileName: "myfile",
    onSubmit: function(files) {
        $("#eventsmessage").html($("#eventsmessage").html() + "<br/>Submitting:" + JSON.stringify(files));
    },
    onSuccess: function(files, data, xhr) {
        $("#eventsmessage").html($("#eventsmessage").html() + "<br/>Success for: " + JSON.stringify(data));
    },
    afterUploadAll: function() {
        $("#eventsmessage").html($("#eventsmessage").html() + "<br/>All files are uploaded");

    },
    onError: function(files, status, errMsg) {
        $("#eventsmessage").html($("#eventsmessage").html() + "<br/>Error for: " + JSON.stringify(files));
    }
});

Here is the demo with nice documentation for this plugin:

http://hayageek.com/docs/jquery-upload-file.php

UPDATE : Here is the jsFiddle i've created:http://jsfiddle.net/raishul/2x32tq3p/

is this the url where the files will be uploaded?: http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php — user786, May 05 '15 at 15:27
What server side language you are using? You can point it to your file handler server side page. Check the update. — Raishul, May 05 '15 at 15:30

Baso · Answer 2 · 2015-05-05T17:29:19.467

0

If you are Working with asp.net you can use generic handler and call it through ajax to upload your files.

if you are interested in this let me know to give you a complete answer.

In asp.net You can use this Tutorial one it's pretty much what I do. This will allow you to upload the file without post back. There is another way that uploads in the server side using asp.net control FileUpload, but I don't recommend it.

edited May 05 '15 at 17:29

answered May 05 '15 at 15:20

Baso

1,354
4
19
41

sure give me full answer – user786 May 05 '15 at 15:25
@Alex The Answer is Updated with a Link. – Baso May 06 '15 at 11:56

how to invoke html control event without html control

2 Answers2