JQuery ajax file upload example


<pre><script type="text/javascript">

	function ajaxFileUpload(load)
	{
		var photo = '<c:out value="${user.photopath}"/>';
		var id= '<c:out value="${user.idUser}"/>';

		if(load == false) {
			if(photo == 'null' | photo == '') {
				$("#rePhoto1").attr("src", "/kameroom/display/images/main/logo.png");
				return false;
			}
			var sr = "<%=request.getContextPath()%>/uploads/thumbnail/profile/"+ id + "/"+ photo;
			$("#rePhoto1").attr("src", sr);
			return false;
		}

		var fileType = $('#photo').val().split('.').pop().toLowerCase();

		if(fileType == '') {
			alert('Please select a photo first');
			return false;
		}
		if($.inArray(fileType, ['bmp','png','jpg','jpeg']) == -1) {
		    alert('Invalid file type, only bmp, jpg and png supported');
		    return false;
		}

		var s = '';
		$.ajaxFileUpload
		(
			{
				url:'<%=request.getContextPath()%>/profile/photoupload.k',
				secureuri:false,
				fileElementId:'photo',
				dataType: "xml",
				success: function (xml, status)
				{

					$(xml).find("p").each(function() {
						 s = "/kameroom" + $(this).find("l").text();
					});

                    var img = $("<img style=\"width: 100px!important;border: 0!important;height: auto!important;\" onclick=\"return false;\"/>").attr("src", s + "?" + new Date().getTime())
					.load(function() {
                    	$("#rePhotoMain").html('');
                     	$("#rePhotoMain").append(img);
                    });

					if(typeof(xml.error) != 'undefined')
					{
						if(xml.error != '')
						{
							alert(xml.error);
						}else
						{
							alert(xml.msg);
						}
					}
				},
				error: function (xml, status, e)
				{
					alert('contact@kameroom.nl ' + e);
				}
			}
		);

		return false;

	}

	</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s