当前位置: 首页 > 网站开发 > 正文

jQuery-File-Upload实例

1 星2 星3 星4 星5 星 (1 次投票, 评分: 3.00, 总分: 5)
Loading ... Loading ...
baidu_share

最近在用jquery实现图片上传,找了一转,发现https://github.com/blueimp/jQuery-File-Upload很不错。兼容性也不错,ie,google,firefox都试了一下,都可以上传。

实例如下:

$("#recipeImg").fileupload({
        //progressall为进度条
	progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i,
    maxNumberOfFiles : 1,
    url:url,//文件上传地址,当然也可以直接写在input的data-url属性内
    formData:{id:userId,title:title},//如果需要额外添加参数可以在这里添加
    done:function(e,result){
        //done方法就是上传完毕的回调函数,其他回调函数可以自行查看api
        //注意result要和jquery的ajax的data参数区分,这个对象包含了整个请求信息
        //返回的数据在result.result中,假设我们服务器返回了一个json对象
        console.log(JSON.stringify(result.result));
    }
});

recipeImg 为input type=file 的id。

当我们clone一个li,里面包含input type=file,在用上面的方法进行上传文件,就不起作用了。主要是maxNumberOfFiles为1在作怪,把文件属性disabled移除就好了。

$("#list li:eq("+index+")").find("input:file").removeAttr('disabled');

完整的例子:

$("#list").delegate("input[type='file']","click",function(){
        //得到当前点击li的index
	var index=$(this).parents("li").index();
	var div=$("#list li:eq("+index+")");
        //js clone生成的对象,必须要移除disabled属性
	$("#list li:eq("+index+")").find("input:file").removeAttr('disabled');
	$("list li:eq("+index+")").find("input[type='file']").fileupload({
		dataType: 'json',
	    acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i,
	    maxNumberOfFiles : 1,
	    url:url,
		add: function (e, data) {
                        //上传图片所需的额外参数			
			data.formData ={userId:4,listorder:1,id:3};
                        //提交到服务器端
			data.submit();
	    },
	    done:function(e,result){ 
	        //成功上传后,应进行工作
	    }
	});
});

参考文章:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload
http://blueimp.github.io/jQuery-File-Upload/

本文固定链接: http://www.chepoo.com/jquery-file-upload-example.html | IT技术精华网

【上一篇】
【下一篇】

jQuery-File-Upload实例:等您坐沙发呢!

发表评论