jQuery无刷新上传之uploadify的示例分析-创新互联

  
  
  
  
 
    $(function () {
      $("#uploadify").uploadify({
        //指定swf文件
        'swf': 'js/uploadify/uploadify.swf',
        //后台处理的页面
        'uploader': 'UploadHandler.ashx',
        //按钮显示的文字
        'buttonText': '上传图片',
        //显示的高度和宽度，默认 height 30；width 120
        //'height': 15,
        //'width': 80,
        //上传文件的类型 默认为所有文件  'All Files' ; '*.*'
        //在浏览窗口底部的文件类型下拉菜单中显示的文本
        'fileTypeDesc': 'Image Files',
        //允许上传的文件后缀
        'fileTypeExts': '*.gif; *.jpg; *.png',
        //发送给后台的其他参数通过formData指定
        //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
        //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
        //'queueID': 'fileQueue',
        //选择文件后自动上传
        'auto': true,
        //设置为true将允许多文件上传
        'multi': true
      });
    });
  
  


  

    <%--用来作为文件队列区域--%>
    
    
    
    

      上传| 
      取消上传
    
  

四：一般处理程序UploadHandler.ashx简单代码如下：

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

      //http://www.cnblogs.com/babycool/
      //接收上传后的文件
      HttpPostedFile file = context.Request.Files["Filedata"];
      //其他参数
      //string somekey = context.Request["someKey"];
      //string other = context.Request["someOtherKey"];
      //获取文件的保存路径
      string uploadPath =
        HttpContext.Current.Server.MapPath("UploadImages" + "\\");
      //判断上传的文件是否为空
      if (file != null)
      {
        if (!Directory.Exists(uploadPath))
        {
          Directory.CreateDirectory(uploadPath);
        }
        //保存文件
        file.SaveAs(uploadPath + file.FileName);
        context.Response.Write("1");
      }
      else
      {
        context.Response.Write("0");
      } 

    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }

五：用到的参数介绍：

通过查看jquery.uploadify-3.1.js中的默认设置并参考官方文档可得知：

参数不重新指定则保持默认：

swf：uploadify.swf 文件的相对路径

uploader：后台处理程序的相对路径

buttonText：按钮显示的文字

上传文件的类型默认为所有文件  'All Files'    '*.*'

可以通过以下两参数指定，指定方法见步骤三中的代码：

fileTypeDesc；fileTypeExts；

auto：为true表示选择文件后自动上传；如果不想自动上传，需设定为false，并通过

 上传| 
 取消上传

来指定是上传还是取消上传；

multi：设置为true将允许多文件上传；

method： 提交方式Post 或Get 默认为Post；

queueSizeLimit：当允许多文件上传时，设置选择文件的个数，默认值为999 ；

另外，取消上传图片的路径是设置在css文件中的；

其他更多设置可以参考官网的帮助文档。

六：将上传完成后显示的Complete显示为中文

英文的Complete不能改成中文”，这可能是之前的版本不能进行修改。我通过查看源代码 jquery.uploadify-3.1.js找到了上传完成时显示的内容：

再参考官方的帮助文档，可以得知，在“

onUploadSuccess” 事件中可以设置上传完成后所执行的代码，则修改后的代码为：

   //选择文件后自动上传
        'auto': true,
        //设置为true将允许多文件上传
        'multi': true,
        //上传成功后执行
        'onUploadSuccess': function (file, data, response) {
          $('#' + file.id).find('.data').html(' 上传完毕');

        }

还有一个需要注意的一点是：一般在设定了选择上传文件路径时比如只允许上传*.jpg;*.png;*.gif格式的图片文件，则除了指定fileTypeDesc；fileTypeExts；两个参数外，还要在服务器端即一般处理程序中再次对上传文件的文件扩展名进行判断，以防一些用户跳过客户端验证上传恶意文件。

感谢各位的阅读！关于“jQuery无刷新上传之uploadify的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。