jQuery+php实现ajax文件上传

最新推荐文章于 2021-03-23 22:46:32 发布

iteye_4096

最新推荐文章于 2021-03-23 22:46:32 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签： jQuery ViewUI

本文链接：https://blog.csdn.net/iteye_4096/article/details/82522050

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

$(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);
			}
		});
	});
});