Jquery.Uploadify v3.2 使用经验

最近项目要用到多文件上传，HTML里没有这个功能，然后上网找到了Uploadify，一个非常不错的JQuery上传插件。然后上网找到了个uploadify-v2.1.0版的例子，写得很好，可是Uploadify v3.2版本有很多方法不一样了。只好硬着头皮去官方网看鸡肠文档 ,其中还发现官方网下载下来的文件，有个图片的位置放错地方了，要自己手动调一下。我还在网上抄了人家的个asp.net的Demo，来跟大家分享一下。

<head>
    <title>无标题页</title>
    <link href="../js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="../js/uploadify/jquery.uploadify.js" type="text/javascript"></script>
    <script type="text/javascript">
	$(function() {
		$('#file_upload').uploadify({
		    'fileTypeDesc' : 'Image Files',
            'fileTypeExts' : '*.gif; *.jpg; *.png',
			'swf'      : '../js/uploadify/uploadify.swf',
			'uploader' : '../js/uploadify/uploadify.ashx',
			'auto'     : false
			// Your options here
		});
	});
	</script>
</head>
<body>
    <div>
        <input type="file" name="file_upload" id="file_upload" />
        <p>
            <a href="javascript:$('#file_upload').uploadify('cancel')">Cancel First File</a>
            |<a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear the Queue</a>
            |<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a>
        </p>
    </div>
</body>
</html>

uploadify.ashx

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";

            HttpPostedFile file = context.Request.Files["Filedata"];
            string uploadPath =
                HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";

            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                file.SaveAs(uploadPath + file.FileName);
                //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
                context.Response.Write("1");
            }
            else
            {
                context.Response.Write("0");
            }  

        }

本人太懒了，以上代码纯属Copy

代码写好了，可是发现这里的 X 按钮出不来。原来是uploadify-cancel.png图片路径问题。下面是我的解决方案。

uploadify.css

新建了img文件夹，把uploadify-cancel.png移到img文件夹里。

以上东西就分享完毕了，可以IE9里不行（IE10还没测）

有木有大侠指点指点一下

转自：开源中国

作者：大角Bangle

链接：http://my.oschina.net/bangle/blog/125834

+友情链接