当前位置: 首页  >  JQuery  >  使用jquery.uploadify上传文件

使用jquery.uploadify上传文件 TOP

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

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

查了一下资料发现有这么一个参数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:点击这里下载...

Views:1457   Posted at:2013-10-31
收藏 推荐 打印 | 录入:Admin | 阅读:0