PHP Classes

File: ajax_file_upload/webroot/js/fileupload.js

Recommend this page to a friend!
  Classes of vishal Bhandare   AJAX Image Upload   ajax_file_upload/webroot/js/fileupload.js   Download  
File: ajax_file_upload/webroot/js/fileupload.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: AJAX Image Upload
Manage uploads of image files
Author: By
Last change: Update of ajax_file_upload/webroot/js/fileupload.js
Date: 8 months ago
Size: 3,980 bytes
 

Contents

Class file image Download
(function($) { $.fn.ajaxfileuploader = function(options) { var opts = $.extend({}, $.fn.ajaxfileuploader.defaults, options); var filelist = new Array(); var uploadwidget = new Object(); var imgwidget = new Object(); return this.each(function() { buildElement($(this).attr("id")) $(this).change(onChange); }); function onChange() { /* Validate Form Before submit */ var filename = $(this).val(); var pos = filename.lastIndexOf('.'); var msg = ''; if(pos !== -1) { var extension = filename.substring(pos+1); var isvalidextension = false; msg = "Invalid file not supported"; for(i in opts.VALIDFORMAT) { if(extension == opts.VALIDFORMAT[i]) {isvalidextension= true; break;} } } if(isvalidextension && imgwidget.find("tr").length > opts.MAXUPLOAD) {isvalidextension= false; msg = "only "+opts.MAXUPLOAD+" File can be uploaded ";displayUploadForm()} if(isvalidextension) uploadwidget.find("form").submit(); if(!isvalidextension||pos == -1) alert(msg) return false; } function delRow(){ if(!confirm("Are you sure, you want to delete this image?")) return; var row = $(this).parents("tr"); var imgname = $(this).attr("title"); var request = $.ajax({ url: opts.SCRIPT+"?action=deleteimg", type: "POST", async:false, data: {name : imgname}, dataType: "html" }); request.done(function(msg) { row.remove(); displayUploadForm() }); request.fail(function(jqXHR, textStatus) { alert( "Request failed:User " + textStatus ); }); return false; } function displayUploadForm(){ if(imgwidget.find("tr").length < opts.MAXUPLOAD+1) uploadwidget.find('form input').removeAttr("disabled") else uploadwidget.find('form input').attr("disabled","disabled") } function loaddetails(){ var txt = uploadwidget.find("iframe").contents().find('body').html(); var obj = jQuery.parseJSON(txt); if(obj) { for(i in obj['files']) { var name = obj['files'][i].name; var thumbimgurl = obj['files'][i].thumbimgurl; var upload_name = obj['files'][i].upload_name; imgwidget.find("table").append("<tr id='"+name+"'><td><img src='"+thumbimgurl+"'></td><td>"+upload_name+"</td><td><a href='javascript:void(0)' class='delrow' title='"+name+"'>Delete</a></td></tr>"); imgwidget.find("tr[id='"+name+"'] a.delrow").click(delRow) } } displayUploadForm(); } function buildElement(id) { var pos = $("#"+id).offset(); var divid = "uploadwidget"+id var formid = "idOfFormElement"+id; var iframeid = "idOfIframeElement"+id; $('body').append($('<div id="'+divid+'"></div>')); $('body').append($('<div id="'+divid+'_imgmgt" class="filemgt"><table></table><div class="paginate"></div></div>')); uploadwidget = $('#'+divid); imgwidget = $('#'+divid+'_imgmgt'); imgwidget.find("table").append("<tr><td>"+opts.TABLEHEAD.name+"</td><td>"+opts.TABLEHEAD.imgname+"</td><td>"+opts.TABLEHEAD.operation+"</td></tr>"); uploadwidget.append('<iframe name="'+iframeid+'" id="'+iframeid+'" style="width:0px;height:0px" src="'+opts.SCRIPT+'?action=getimages"></iframe>'); uploadwidget.append($('<form action="'+opts.SCRIPT+'?action=addimg" enctype="multipart/form-data" method="post" target="'+iframeid+'"></form>')); uploadwidget.find('form').append('<input id="fileupload1" type="file" name="files1" class="file" >'); uploadwidget.css("position","absolute") uploadwidget.css("top",pos.top); uploadwidget.css("left",pos.left); uploadwidget.find('iframe').hide(); uploadwidget.find('iframe').bind('load',loaddetails); $("#"+id).hide(); uploadwidget.find('.file').change(onChange); } } $.fn.ajaxfileuploader.defaults = {SCRIPT: 'process.php',ACTION:'',VALIDFORMAT:['jpeg','jpg','png','gif'],MAXUPLOAD:5,TABLEHEAD:{name:'name',imgname:'image name',operation:'Operation'}} })(jQuery);