`

jQuery+php实现ajax文件上传

阅读更多
$(function () {
	var bar = $('.bar');
	var percent = $('.percent');
	var showimg = $('#showimg');
	var progress = $(".progress");
	var files = $(".files");
	var btn = $(".btn span");
	$(".demo").wrap("<form id='myupload' action='action.php' method='post' enctype='multipart/form-data'></form>");
    $("#fileupload").change(function(){
		$("#myupload").ajaxSubmit({
			dataType:  'json',
			beforeSend: function() {
        		showimg.empty();
				progress.show();
        		var percentVal = '0%';
        		bar.width(percentVal);
        		percent.html(percentVal);
				btn.html("上传中...");
    		},
    		uploadProgress: function(event, position, total, percentComplete) {
        		var percentVal = percentComplete + '%';
        		bar.width(percentVal)
        		percent.html(percentVal);
    		},
			/*complete: function(xhr) {
				$(".files").html(xhr.responseText);
			},*/
			success: function(data) {
				files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");
				var img = "http://demo.helloweba.com/upload/files/"+data.pic;
				showimg.html("<img src='"+img+"'>");
				btn.html("添加附件");
			},
			error:function(xhr){
				btn.html("上传失败");
				bar.width('0')
				files.html(xhr.responseText);
			}
		});
	});
	
	$(".delimg").live('click',function(){
		var pic = $(this).attr("rel");
		$.post("action.php?act=delimg",{imagename:pic},function(msg){
			if(msg==1){
				files.html("删除成功.");
				showimg.empty();
				progress.hide();
			}else{
				alert(msg);
			}
		});
	});
});

 

分享到:
评论

相关推荐

    jQuery+php实现ajax文件上传 For ASP

    本教程将探讨如何利用jQuery和PHP实现一个AJAX文件上传功能,适用于ASP平台。以下是相关知识点的详细说明: 1. **jQuery**: jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。在...

    jQuery+php实现ajax文件即时上传

    "jQuery+php实现ajax文件即时上传"这个主题涉及了利用jQuery库来构建前端交互,配合PHP后端处理文件上传,以及如何实时反馈上传进度。以下是关于这一主题的详细知识解释: 1. **jQuery**:jQuery是一个广泛使用的...

    PHP多文件上传插件,PHP+jQuery+Ajax多图片上传

    总的来说,PHP+jQuery+Ajax多图片上传插件是构建高效、易用的文件上传功能的理想选择。它通过分离前后端任务,实现了无刷新的用户体验,同时利用Ajax提供了流畅的进度反馈。在实际开发中,开发者可以根据项目需求...

    PHP+jQuery+Ajax仿淘宝多上传按钮单文件上传

    在本文中,我们将深入探讨如何使用PHP、jQuery和Ajax技术来实现一个仿淘宝的多上传按钮功能,允许用户单文件上传。这个功能在现代Web应用中非常常见,它提供了友好的用户体验,允许用户在不刷新页面的情况下上传文件...

    PHP+jQuery+Ajax多图片上传

    总结来说,"PHP+jQuery+Ajax多图片上传"是一种高效且用户体验良好的图片上传解决方案,结合了前端的动态交互和后端的服务器处理,实现了Web应用中的重要功能。开发者需要熟练掌握这些技术,以便在实际项目中灵活运用...

    PHP + jQuery实现ajax文件即时上传 预览 配套资源

    在本文中,我们将深入探讨如何使用PHP和jQuery的Ajax技术实现...以上就是使用PHP和jQuery实现Ajax文件即时上传和预览的基本流程。这种技术在现代Web应用中广泛使用,提高了用户体验,使文件上传变得更加流畅和直观。

    php+jquery+ajax无刷新多图上传

    在本文中,我们将深入探讨如何实现“PHP+jQuery+AJAX无刷新多图上传”的技术细节。这是一种在网页上实现动态、用户友好的图片上传功能的方法,它允许用户在不刷新整个页面的情况下上传多张图片,提高用户体验。下面...

    jquery+ajax实现文件上传的js

    本文将深入探讨如何利用jQuery和AJAX实现文件上传,并重点介绍`ajaxfileupload.js`这个jQuery插件。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等任务。而AJAX(Asynchronous ...

    php+jquery+ajax上传头像插件

    Uploadify是一款基于jQuery的文件上传插件,支持多文件上传、进度条显示和自定义样式等特性。在头像上传插件中,Uploadify负责文件的选取和上传,它可以处理大文件上传,避免了因为文件过大导致的浏览器崩溃问题,并...

    jquery+php实现实现突破上传及裁剪功能

    确保对上传的图片进行验证,防止恶意文件上传;同时,优化图片加载速度,提供友好的用户反馈,使整个流程流畅且易于理解。 在提供的`jqphoto`压缩包中,应包含了实现以上功能的HTML、CSS、JavaScript(jQuery和....

    php+jquery+ajax多图上传插件

    SWFUpload是一个古老的JavaScript和Flash结合的多文件上传解决方案,它利用Flash的特性实现大文件分块上传和文件预览功能。尽管Flash现在已经被广泛替代,但在HTML5 File API普及之前,SWFUpload因其良好的兼容性和...

    jquery+ajax上传解析文件

    这里我们将深入探讨如何使用jQuery结合Ajax技术来实现文件上传,并通过JSON进行数据解析。 首先,jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在文件上传的场景中,...

    jquery+ajax文件上传

    本主题将深入探讨如何使用jQuery与AJAX技术实现文件上传,同时还能传递其他表单参数,以提高用户体验和数据处理的灵活性。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...

    php+jquery+ajax无刷新上传图片

    PHP处理文件上传和验证,jQuery负责客户端的交互和AJAX调用,而AJAX则实现了在后台处理数据传输,使得页面无需刷新即可完成文件上传,提升了用户体验。这个代码实例是一个基本的起点,实际应用中可能需要根据项目...

Global site tag (gtag.js) - Google Analytics