Feb 25 2015
jTable jQuery Plugin File Upload Control
By default jTable jQuery Plugin does not allow to upload file and use File Upload HTML Control.
Here I implemented jTableSample demo with File Upload Control.
Step1: Create new field that will put <div> tag for our AJAX File Upload.
| 1 2 3 4 5 6 7 8 9 | FileUpload: { title: 'Customers File', list: false, create: true, edit: true, input: function (data) { return '<div id="FileUpload" name="FileUpload"></div>'; } } |
Step2: We will load AJAX File Upload on div which inserted in first step. When file upload through AJAX, it will return file name, after that we will store that file in one JavaScript variable called UploadedFile.
| 1 2 3 4 5 6 7 8 9 10 | formCreated: function (event, data){ data.form.attr('enctype','multipart/form-data'); $("#FileUpload").uploadFile({ url:"upload.php", fileName:"file", onSuccess:function(files,data,xhr){ UploadedFile = data; } }); } |
Step3: Furthermore, when we submit form for insert record we will set UploadedFile variable in on textbox which will send file name for inserting in database.
| 1 2 3 | formSubmitting: function (event, data) { $("#FileUpload").html('<input type="text" id="thumb_img" name="thumb_img" value="' + UploadedFile + '">'); } |
All other settings are same. Kindly feel free to talk to me.
Like to Download Source Code of Complete Example.
