jquery Uploadify上传文件

<linkrel="stylesheet"type="text/css"href="resources/css/uploadify.css"><scripttype="t... <link rel="stylesheet" type="text/css" href="resources/css/uploadify.css">
<script type="text/javascript" src="resources/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'resources/others/uploadify.swf',
'script' : 'servlet/Upload',
'cancelImg' : 'resources/images/cancel.png',
'folder' : 'resources/uploads',
'queueID' : 'fileQueue',
'auto' : false,
'multi' : true,
'simUploadLimit' : 2,
'buttonText' : 'BROWSE'
});
});
</script>
</head>

<body>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="upload" />
<p>
<a href="javascript:jQuery('#upload').uploadifyUpload()">开始上传</a>
<a href="javascript:jQuery('#upload').uploadifyClearQueue()">取消所有上传</a>
</p>
</body>
为什么在firefox里点击上传之后报错:TypeError: jQuery("#upload").uploadifyUpload is not a function。求大神指教
展开
 我来答
娱乐这个feel倍爽儿
推荐于2018-05-01 · 人生如戏,戏如人生 娱百家事,乐万千户
娱乐这个feel倍爽儿
采纳数:47982 获赞数:334156

向TA提问 私信TA
展开全部

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。

首先按下面的步骤来实现一个简单的上传功能。

1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中。

2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。

3 在项目中添加UploadFile文件夹,用来存放上传的文件。

进行完上面三步后项目的基本结构如下图:

4 Default.aspx的html页的代码修改如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Uploadify</title>
    <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
     rel="stylesheet" type="text/css" />
    <link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
     rel="stylesheet" type="text/css" />

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

    <script type="text/javascript"
   src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#uploadify").uploadify({
                'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
                'script': 'UploadHandler.ashx',
                'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': false,
                'multi': true
            });
        });  
    </script>

</head>
<body>
    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
      <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
      <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
    </p>
</body>
</html>

5  UploadHandler类的ProcessRequest方法代码如下:

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");   
    }  
}

6 运行后效果如下图:

百度网友1502360
推荐于2016-09-02 · TA获得超过545个赞
知道小有建树答主
回答量:75
采纳率:0%
帮助的人:71.2万
展开全部
你用的是不是Uploadify3.1版本的,你看下API里面是没有下面这个2个属性的,
'uploader' : 'resources/others/uploadify.swf',
'script' : 'servlet/Upload',
你这2个属性是以前版本里面的,3.1版以后script换成swf里。你看仔细了,应该就是这个原因,你去看下docs里面的内容;
更多追问追答
追问
我想用3.1的实现功能,你有没有完整的使用3.1的可用的文件啊??发给我参考一下吧,谢谢
追答
我写的3.1版简单列子,不过我按钮的样式没设置,还是用默认的,你参考下吧!
有些属性看你自己的需要加,我有些属性没加,你最好还是去熟悉下3.1版,各个属性的说吧!
别忘了导入官方的css和js包;
$(document).ready(function() {
$("#file_upload")
.uploadify({
'uploader' : '你要发送到后台的action请求',
'swf' : '/js/uploadify/uploadify-3.1.swf',
'queueID' : 'uploadGsQueue',
'auto' : false,
'multi' : true,
'width' : 95,
'height' : 20,
'fileSizeLimit' : '50MB', //限制上传的文件大小
'fileTypeExts' : '*.*;', //允许的格式
'onUploadSuccess' : function(file,data, response) {
// alert("文件:" + "["+file.name +"]"+ "上传成功");
},
'onUploadError' : function(file,errorCode, errorMsg,errorString) {
$.messager.alert("提示信息", '文件'
+ file.name
+ '上传失败,错误信息如下:'
+ errorString,
"warning");
}
});

//按钮

//上传队列
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
kangkaime
2012-08-09 · TA获得超过200个赞
知道小有建树答主
回答量:269
采纳率:0%
帮助的人:169万
展开全部
$("#uploadify").uploadify({应该是选id吧 $("#upload").uploadify
追问
上面那个错误应该是版本的问题的。我想用的是3.1的实现上传,你有没有完整的实现了的代码,给我参考一下?谢谢
追答
我不用这个插件的 我用的ajaxfileupload插件
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
你以为你以为de
2015-06-28 · 知道合伙人软件行家
你以为你以为de
知道合伙人软件行家
采纳数:503 获赞数:1339
某培训机构毕业,大专学位。工作2年,喜欢百度知道答题,可以互相学习共通过进步。

向TA提问 私信TA
展开全部
  1. 网上有插件下载下来

  2. 引入项目文件急用

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友46b235f5b2
2012-08-08 · TA获得超过1397个赞
知道小有建树答主
回答量:676
采纳率:100%
帮助的人:627万
展开全部
$("#uploadify").uploadify({

里边加上这个属性:'fileDataName':'upload'
追问
还是不行啊,还是那个错误。你有没有这个可用的页面给我参考一下啊??谢谢
追答
看下我的这个文档:
wenku_
baidu_
com/
view/
e09985a4b0717fd5360cdc68_
html
下划线用dian代替
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式