使用jquery.uploadify上传文件

今天在网上找了一天,想要找到一个比较全的使用案例,结果发现基本上全是一个版本的。。。

我的问题主要是上传完成后,还需要将路径获取到,然后保存到数据库。

查了一下资料发现有这么一个参数onComplete,然后就想明白了。

话不多,开始code

    <link rel="Stylesheet" href="js/uploadify.css" />

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/swfobject.js"></script>

    <script type="text/javascript" src="js/jquery.uploadify.min.js"></script>
 <script type="text/javascript">
       $(document).ready(function() {
            $("#uploadify").uploadify({
                'uploader': 'js/uploadify.swf',
                'script': 'UploadFile.ashx',
                'cancelImg': 'js/cancel.png',
                'folder': 'upload',
                'queueID': 'fileQueue',
                'auto': true,
                'multi': true,
                'buttonText': '',
                'buttonImg':'js/browseBtn.png',
                'height':'25',
                'wmode':'transparent',
                'onComplete':function (event, queueId, fileObj, response, data)   
                 {    
                    //可以用隐藏域隐藏起来
                    $('<li></li>').appendTo('.files').text(response);    
                 },
            });
          
       });  
    </script>


    //页面正文内容
    <input type="file" name="uploadify" id="uploadify" />
       <%--<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 取消上传</a>--%>
    <div id="fileQueue"></div> <div class="files"></div>

从网上找的图片,挺好看的,大家可以试试。

后台UploadFile.ashx文件中

HttpPostedFile file = context.Request.Files["FileData"];
            string uploadpath = context.Server.MapPath(context.Request["folder"] + "\\");

            if (file != null)
            {
                if (!Directory.Exists(uploadpath))
                {
                    Directory.CreateDirectory(uploadpath);
                }
                file.SaveAs(uploadpath + file.FileName);
          //在这里将文件保存的路径返回到页面 context.Response.Write(uploadpath
+ file.FileName); } else { context.Response.Write("0"); }

在处理程序中也可以返回自定义的json,前台onComplete事件中通过参数response接收到数据,解析,然后使用jquery将路径保存到隐藏域里面,在提交保存时,通过隐藏域对象获取到路径就ok了

我也是初次使用,大家要有好的建议可以一起讨论。

附上自己写的小demo:点击这里下载...

posted @ 2013-10-31 15:46  梦醒心晴  Views(1068)  Comments(2Edit  收藏  举报