Clever Geek Handbook

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.

+3


source to share


3 answers


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.

+2


source


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.

+1


source


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
+1


source






More articles:


All Articles