JQuery plugin: crud table plugin supporting file uploading
I used the jtable plugin. It worked fine until I answer the need to upload a file or multiple files (the image itself) in my form. I researched and found out that there is no this function in jtable. Is there any jquery plugin that supports multiple file uploads.
You probably won't find image loading functionality bundled with the jQuery grid plugin as they are separate issues. I would suggest creating / enabling plugins function to load files / ajax on Add / Edit of your string and then save it with those strings data or json object.
For a really advanced jQuery table plugin, I usually run torwards http://www.trirand.com/blog/jqgrid/jqgrid.html jqGrid, although it overwhelms most projects.
For a good upload plugin that handles multiple files check out http://blueimp.github.com/jQuery-File-Upload/
You can connect the load plugin to the grid row data.
hi you can use Uploadify on jtable. you can refer to the steps I took in the last post (une6)
https://github.com/hikalkan/jtable/issues/321
took a while to figure out, but I hope this helps too.
Just follow these steps 1.add this code for jtable javascript code below field "image_upload: {title: 'P. Image', list: true, width: '20% ',
display: function (data) {
return '<div id='+ data.record.PersonId + '><form id="form'+ data.record.PersonId +'" method="post" enctype="multipart/form-data" action="ajaximage.php"><input type="file" name="photoimg" id="'+ data.record.PersonId +'" class="upload"/><input type="hidden" value="'+ data.record.PersonId +'"/></form></div><div id="preview'+ data.record.PersonId +'"></div>';
}"
in "data.record.PersonId" PersonId is the return jtable from the database
- download the script from
http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html - unzip the folder
copy the jquery.form.js file and include this file in your page. -
add this code to header
$ (document) .ready (function () {
$('.upload').live('change', function() { var id=this.id; $("#preview"+id).html(''); $("#preview"+id).html('<img src="img/loader.gif" alt="Uploading...."/>'); $("#form"+id).ajaxForm({ target: '#preview'+id }).submit(); }); });
-
make loading folder name to save file or customize it to ajaximage.php
- copy the loader.gif bundle from the unzip directory to the directory and enjoy