SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    ajax file uploader

    Hi,

    What's the best way to approach an ajax file uploader?
    Anyone have a simple example they want to share? been looking at others and they seem very convoluted.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    How about this?
    Ajax File Upload
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Yep

    Thanks Paul, that's the approach I ended up taking.
    Basically all file uploads in the whole system will be handled by a centralised dialog with the multipart form.

    This is still pretty rough but you'll get the idea.
    Code:
    <div id="file-dialog" class="init" data-control="Dialog" data-title="File upload" data-modal="true" style="display: none">
    	<form enctype="multipart/form-data" action="upload.php" id="file-form" target="file-frame" method="post">
    		<div class="file">
    			<input class="real" type="file" name="file" id="file">
    			<input type="hidden" name="MAX_FILE_SIZE" value="5000">
    			<span class="fake">
    				<a href="#" class="button">Select file</a>
    				<span id="file-name"></span>
    				<img id="file-loader" src="img/loading.gif" style="display:none">
    			</span>
    		</div>
    		<br>
    		<p><b>File restrictions</b><br>
    		Accepted file types: doc, pdf, txt, xls, ppt, jpg, bmp, png &amp; gif<br>
    		Max file size: 5MB</p>
    	</form>
    	<iframe src="javascript:false;" id="file-frame" name="file-frame" style="display:none"></iframe>
    </div>
    The places in forms I need to attach files I just have a button which launches the dialog
    Code:
    <div class="file init" data-control="FileUpload">
    	<img class="preview" src="img/blank.gif" style="display:none">
    	<span class="filename" style="display:none"></span>
    	<a href="#" class="button upload">Upload file</a>
    	<input class="value" type="hidden" name="icon">
    </div>
    The js
    Code javascript:
    (function() {
     
    var activeControl,file,form,dialog,frame,loader,filename,message;
    var docTypes = /(txt|doc|pdf|xls|ppt)$/
    var imgTypes = /(jpg|bmp|gif|png)$/;
     
    Controls.FileUpload = {
    	initOnce: function() {
    		file = $('#file');
    		form = $('#file-form');
    		dialog = $('#file-dialog');
    		frame = $('#file-frame');
    		loader = $('#file-loader');
    		filename = $('#file-name');
    		message = $('#file-messsage');
     
    		file.change(function() {
    			loader.show();
    			filename.html(this.value.replace(/^(.*)?\\/g, ''));
    			form.submit();
    		});
    		$body.delegate('.file .upload', 'click', function() {
    			activeControl = $(this).parent('.file');
    			dialog.dialog('open');
    			return false;
    		});
    	},
    	uploaded: function(success, data) {
    		var name = activeControl.find('.filename'),
    		preview = activeControl.find('.preview'),
    		value = activeControl.find('.value');
    		var ext = data.path.substr(data.path.lastIndexOf('.')+1, data.path.length);
    		if (success) {
    			if (imgTypes.test(ext)) {
    				preview[0].src = data.path;
    				name.hide();
    			}
    			else {
    				ext = (docTypes.test(ext)) ? ext : 'txt';
    				preview[0].src = 'img/file.'+ext+'.png';
    				name.html(data.filename).show();
    			}
    			preview.show();
    			value.val(data.path);
     
    			dialog.dialog('close');
    			loader.hide();
    			filename.html('');
    		}
    		else {
    			$('#message').html(options.message);
    			loader.hide();
    			filename.html('');
    		}
    	}
    }
     
    })();
    The upload page calls a function on the parent with the file info
    Code:
    <script>
    parent.Controls.FileUpload.uploaded({SUCCESS}, {
        path: '{PATH-SAVED-IN-FORM}',
        filename: '{PATH-DISPLAYED-ON-SCREEN}'
    });
    </script>
    Thanks for your help, as always.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •