uploadify在非IE核心浏览器下无法上传,jquery插件
分类:关于计算机

一时项目中需求多少个文件批量上传功能时,个人认为uploadify是飞快便捷的施工方案,分享给大家供大家参谋,具体如下

一、jquery uploadify自己介绍:

先上效果图:

  (1)、大家好,作者是jquery插件我们族中承受贯彻异步上传的插件,作者不是不二法门,只是较好用的一款。

图片 1

  (2)、作者的效应:

图片 2

  协理单文件或多文本上传,可决定并发上传的文本数

实际代码如下:

    在服务器端帮忙各样语言与之相配使用,诸如PHP,.NET,Java……

在页面中如下

    通过参数可配置上传文件类型及大小限制

图片 3

    通过参数可布署是否采用文件后自行上传

完整页面代码

    易于扩充,可决定每一步骤的回调函数(onSelect, onCancel……)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>文件批量上传Demo</title>
 <!--引入Jquery-->
 <script src="js/jquery-1.11.3.min.js"></script>
 <!--引入uploadify-->
 <script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
 <link type="text/css" href="uploadify/uploadify.css" rel="stylesheet" />

 <script type="text/javascript">
  $(function () {
   var guid = '<%=Request["guid"] %>';
   var type = '<%=Request["type"] %>';
   if (guid == null || guid == "") {
    guid = newGuid();
   }
   if (type != null) {
    type = type + '/';
   }

   $('#file_upload').uploadify({
    'swf': 'uploadify/uploadify.swf',    //FLash文件路径
    'buttonText': '浏 览',      //按钮文本
    'uploader': 'uploadhandler.ashx?guid=' + guid, //处理ASHX页面
    'formData': { 'folder': 'picture', 'isCover': 1 },   //传参数
    'queueID': 'fileQueue',      //队列的ID
    'queueSizeLimit': 10,       //队列最多可上传文件数量,默认为999
    'auto': false,         //选择文件后是否自动上传,默认为true
    'multi': true,         //是否为多选,默认为true
    'removeCompleted': true,      //是否完成后移除序列,默认为true
    'fileSizeLimit': '0',       //单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值
    'fileTypeDesc': 'All Files',     //文件描述
    'fileTypeExts': '*.*',       //上传的文件后缀过滤器
    'onQueueComplete': function (queueData) {  //所有队列完成后事件
     alert("上传完毕!");
    },
    'onError': function (event, queueId, fileObj, errorObj) {
     alert(errorObj.type + ":" + errorObj.info);
    },
    'onUploadStart': function (file) {
    },
    'onUploadSuccess': function (file, data, response) { //一个文件上传成功后的响应事件处理
     //var data = $.parseJSON(data);//如果data是json格式
     //var errMsg = "";
    }

   });
  });

  function newGuid() {
   var guid = "";
   for (var i = 1; i <= 32; i++) {
    var n = Math.floor(Math.random() * 16.0).toString(16);
    guid += n;
    if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
     guid += "-";
   }
   return guid;
  }

  //执行上传
  function doUpload() {
   $('#file_upload').uploadify('upload', '*');
  }
 </script>

</head>
<body>
 <form id="form1" runat="server" enctype="multipart/form-data">
  <div id="fileQueue" class="fileQueue"></div>
  <div>
   <input type="file" name="file_upload" id="file_upload" />
   <p>
    <input type="button" class="shortbutton" id="btnUpload" onclick="doUpload()" value="上传" />
        
    <input type="button" class="shortbutton" id="btnCancelUpload" onclick="$('#file_upload').uploadify('cancel')" value="取消" />
   </p>
   <div id="div_show_files"></div>
  </div>
 </form>
</body>
</html>

    通过接口参数和CSS调控外观

UploadHandler.ashx代码:

    Uploadify主页地址: 在该页面你能够精晓到有关他的越来越多内容。

using System;
using System.Web;
using System.IO;

public class UploadHandler : IHttpHandler {

 public void ProcessRequest (HttpContext context) {
  context.Response.ContentType = "text/plain";
  context.Request.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
  context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
  context.Response.Charset = "UTF-8";

  if (context.Request.Files.Count > 0)
  {
   #region 获取上传路径
   string uploadFolder = GetUploadFolder();
   #endregion

   if (System.IO.Directory.Exists(uploadFolder))
   {//如果上传路径存在
    HttpPostedFile file = context.Request.Files["Filedata"];
    string filePath = Path.Combine(uploadFolder, file.FileName);
    file.SaveAs(filePath);
    context.Response.Write("0");
   }
   else
   {
    context.Response.Write("2");
   }
  }
 }

 public bool IsReusable {
  get {
   return false;
  }
 }

 /// <summary>
 /// 返回不带后缀的文件名
 /// </summary>
 /// <param name="fileName"></param>
 /// <returns></returns>
 public static string GetFirstFileName(string fileName)
 {
  return Path.GetFileNameWithoutExtension(fileName);
 }

 /// <summary>
 /// 获取上传目录
 /// </summary>
 /// <returns></returns>
 public static string GetUploadFolder()
 {
  string rootPath = HttpContext.Current.Server.MapPath("~");
  return Path.Combine(rootPath, "test");
 }

}

   (3)、作者的用法:

文本上传.NET暗许有大大小小限制,像IIS限制的30M默许央求大小。假若不想修改IIS,又想突破那些尺寸的范围,举个例子上传1GB大小的文本。

          去baidu.com,google.com  search search,很多。

那是修改Web.config就能够达成。

二、firefox下自身出故障了,是自己的标题呢?

<?xml version="1.0" encoding="utf-8"?>

<!--
 -->

<configuration>

 <system.web>
  <compilation debug="true" targetFramework="4.0" />
  <httpRuntime maxRequestLength="1073741824"/>
 </system.web>

 <!--用于设置文件上传的最大允许大小(单位:bytes)-->
 <system.webServer>
  <security>
  <requestFiltering>
   <!--修改服务器允许最大长度(1GB)-->
   <requestLimits maxAllowedContentLength="1073741824"/>
  </requestFiltering>
  </security>
 </system.webServer>

</configuration>

      jquery uploadify在ie下可以健康上传,在实现异步上传的时候,每二个文本在上传时都会付出给服务器一个呼吁。各样央求都亟待安全认证,session和cookie的校验。是的,就是那样。由于jquery uploadify是借助flash来落成上传的,每三次向后台发送数据流央求时,ie会自动把地点cookie存款和储蓄捆绑在一块发送给服务器。但firefox、chrome不会那样做,他们会认为那样不安全。哈,那正是原因。

企望本文所述对我们学习javascript程序设计有所帮忙。

      找到原因了,在让大家来精晓四个概念:

你或者感兴趣的篇章:

  • jQuery.uploadify文件上传组件实例讲明
  • jQuery文件上传控件 Uploadify 详解
  • php+jQuery.uploadify实现文件上传教程
  • jQuery文件上传插件Uploadify使用指南
  • Jquery Uploadify多文件上传带进度条且传递温馨的参数
  • 依靠Jquery插件Uploadify达成实时展现进程条上传图片
  • 化解jQuery上传插件Uploadify出现Http Error 302谬误的主意
  • jQuery uploadify在谷歌(Google)和火狐浏览器上传失败的施工方案
  • 消除jQuery uploadify在非IE核心浏览器下不能够上传
  • firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
  • 详解jQuery uploadify文件上传插件的施用方式

      (1)、session:

        Session又称为会话状态,是Web系统中最常用的情状,用于保障和眼下浏览器实例相关的局地新闻。举例来讲,大家可以把已报到客商的顾客名放在Session中,那样就能够经过判别Session中的有个别Key来推断客商是或不是登陆,倘使登入的话客商名又是稍稍。

        大家清楚,Session对于每三个顾客端(也许说浏览器实例)是“人手一份”,顾客第贰遍与Web服务器创建连接的时候,服务器会给顾客分发一个SessionID作为标志。SessionID是叁个由23个字符组成的私下字符串。顾客每一趟提交页面,浏览器都会把这么些SessionID蕴涵在 HTTP头中提交给Web服务器,那样Web服务器就会分别当前呼吁页面包车型地铁是哪四个客商端。那么,ASP.NET 2.0提供了怎么存款和储蓄SessionID的形式呢!

      (2)、Cookie,不常也用其复数方式Cookies,指某个网址为了鉴定分别客户地方、实行session追踪而积累在顾客本地终端上的数额(常常经过加密)。

三、技术方案

1.asp.net环境下

在Global.asax文件中,编写如下代码:

void Application_BeginRequest(object sender, EventArgs e)  
  {
    try { 
      string session_param_name = "ASPSESSID"; 
      string session_cookie_name = "ASP.NET_SessionId"; 
      if (HttpContext.Current.Request.Form[session_param_name] != null) 
      { 
        UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]); 
      } 
      else if (HttpContext.Current.Request.QueryString[session_param_name] != null) 
      { 
        UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]); 
      } 
    }
    catch { 
    } 

    //此处是身份验证
    try { 
      string auth_param_name = "AUTHID"; 
      string auth_cookie_name = FormsAuthentication.FormsCookieName; 
      if (HttpContext.Current.Request.Form[auth_param_name] != null) 
      { 
        UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]); 
      } 
      else if (HttpContext.Current.Request.QueryString[auth_param_name] != null) 
      { 
        UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);
      } 
    }
    catch { }
  }

  private void UpdateCookie(string cookie_name, string cookie_value)
  {
    HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
    if (null == cookie)
    {
      cookie = new HttpCookie(cookie_name);
    }
    cookie.Value = cookie_value;
    HttpContext.Current.Request.Cookies.Set(cookie);//重新设定请求中的cookie值,将服务器端的session值赋值给它
  }

   /*---------------------------Aspx页面端代码---------------------------------*/

   this.hfAuth.Value = Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value;


   this.hfAspSessID.Value = Session.SessionID;

      把session值及地位验证值保存到顾客端控件中,然后您就足以经过js获取那四个值,然后传给下边的插件js伊始化程序。

     (之所以选取将session值归入到控件中存款和储蓄,也是怕顾客端禁止使用cookie的思考。)

   /*-----------------------------以下是js代码----------------------------------*/

  InitUpload: function(auth, AspSessID) {
    $("#uploadify").uploadify({
      uploader: 'Scripts/jqueryplugins/Infrastructure/uploadify.swf',
      script: 'Handlers/ResourceHandler.ashx?OpType=UploadResource',
      cancelImg: 'Scripts/jqueryplugins/Infrastructure/cancel.png',
      queueID: 'fileQueue',
      sizeLimit: '21480000000',
      wmode: 'transparent ',
      fileExt: '*.zip,*.jpg, *.rar,*.doc,*.docx,*.xls,*.xlsx,*.png,*.pptx,*.ppt,*.pdf,*.swf,*.txt',
      auto: false,
      multi: true,
      scriptData: { ASPSESSID: AspSessID, AUTHID: auth },

            ...........//越来越多配备项,您能够查看官方配置文书档案

       在插件开始化的时候,把地面记录下来的session值,以及身份验证值传给早先化方法,进行参数赋值,那样,每回异步恳求上传文件的时候,相应的 session值就带有在伸手文件中了。

2.C#环境下

上述是asp.net下的缓和措施,那么C#中应有怎么样管理啊?

我是那般化解的,那样全数上传文件的代码都无需修改,改造量最小,不过有安全隐患:

if (this.LoginInfo == null)
{
  // 解决uploadify兼容火狐谷歌浏览器上传问题
  // 但是,此代码使系统有安全隐患,Flash程序请求该系统不需要验证
  // 要解决此安全隐患,需要Flash程序传用户名和密码过来验证,但是该用户名和密码不能写在前端以便被不法用户看到
  if (Request.UserAgent == "Shockwave Flash")
  {
    return;
  }
  else
  {
    filterContext.Result = RedirectToAction("LoginAgain", "Account", new { Area = "Auth" });
    return;
  }
}

我们的体系是ASP.NET MVC的,虽说通过加密的不二诀要能够让客商看不到敏感音讯,但恶意顾客不需求把敏感新闻解密出来就可绕过系统验证。

表达音讯不可能直接写前台,能够用ajax从后台获取验证新闻,然后传给flash,然后在拦截器中验证。

修改后:

JS代码:

ajax央浼后台获取客户名,传给flash

$(function () {
  $.ajax({
    url: "/Auth/Account/GetUserNamePwd",
    type: "POST",
    dataType: "json",
    data: {},
    success: function (data) {
      $("#uploadify").uploadify({
        height: 25,
        width: 100,
        swf: '/Content/Plugins/UploadifyJs/uploadify.swf',
        uploader: 'UploadFile',
        formData: {
          userName: data.data.userName, //ajax获取的用户名
          pwd: data.data.pwd //ajax获取的密码
        },
        buttonText: '选择文件上传',
        fileSizeLimit: '4MB',
        fileTypeDesc: '文件',
        fileTypeExts: '*.*',
        queueID: 'fileQueue',
        multi: true,
        onUploadSuccess: function (fileObj, data, response) {
          var d = eval("(" + data + ")");
          $(".uploadify-queue-item").find(".data").html("  上传完成");
          $("#url").val(d.url);
          $("#name").val(d.name);
        },
        onUploadError: function (event, ID, fileObj, errorObj) {
          if (event.size > 4 * 1024 * 1024) {
            alert('超过文件上传大小限制(4M)!');
            return;
          }
          alert('上传失败');
        }
      }); //end uploadify
    }
  });
});    //end $

拦截器中代码:

......
if (this.LoginInfo == null)
{ 
  // 解决uploadify兼容火狐谷歌浏览器上传问题
  // 但是,此代码使系统有安全隐患,Flash程序请求该系统不需要验证
  // 要解决此安全隐患,需要Flash程序传用户名和密码过来验证,但是该用户名和密码不能写在前端以便被不法用户看到
  if (Request.UserAgent == "Shockwave Flash")
  {
    string userName = Request.Params["userName"];
    string pwd = Request.Params["pwd"];
    if (!string.IsNullOrWhiteSpace(userName) && !string.IsNullOrWhiteSpace(pwd))
    {
      AuthDAL authDAL = new AuthDAL();
      sys_user user = authDAL.GetUserInfoByName(userName);
      if (user != null && user.password == pwd)
      {
        return;
      }
    }
  }
  else
  {
    filterContext.Result = RedirectToAction("LoginAgain", "Account", new { Area = "Auth" });
    return;
  }
}
......

3.jsp版减轻办法

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<%
 String syscontext = request.getContextPath();

%>

<% 
  String path = request.getContextPath(); 
  String basePath = request.getScheme() + "://" 
      + request.getServerName() + ":" + request.getServerPort() 
      + path; 

  String sessionid = session.getId();

%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=syscontext %>/webcontent/resourceManage/wallpapaer/uploadify/uploadify.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=syscontext %>/webcontent/resourceManage/wallpapaer/uploadify/jquery.uploadify-3.1.min.js"></script>

<!-- 注意我使用的jquery uploadify版本-->


<script type="text/javascript">
//用来计算上传成功的图片数
var successCount = 1;

$(function() {
 var uploadUrl = '<%=basePath%>/uploadresource.do;jsessionid=<%=sessionid%>?Func=uploadwallpaper2Dfs';

 var swfUrl2 = "<%=basePath%>/webcontent/resourceManage/wallpapaer/uploadify/uploadify.swf";
  $('#file_upload').uploadify({
    'swf'   : swfUrl2,
    'uploader' : uploadUrl,
    // Put your options here
    'removeCompleted' : false,
    'auto' : false,
    'method'  : 'post',
    'onUploadSuccess' : function(file, data, response) {
      add2SuccessTable(data);
    }
  });
});



/**
 * 将成功上传的图片展示出来
 */
function add2SuccessTable(data){
 var jsonObj = JSON.parse(data);
 for(var i =0; i < jsonObj.length; i++){
  var oneObj = jsonObj[i];
  var fileName = oneObj.fileName;
  var imgUrl = oneObj.imgUrl;

  var td_FileName = "<td>"+fileName+"</td>";
  var td_imgUrl = "<td><img width='150' src='"+imgUrl+"'></img></td>";
  var oper = "<td><input type='button' value='删除' onclick='deleteRow("+successCount+")'/></td>";
  var tr = "<tr id='row"+successCount+"'>"+successCount+td_FileName+td_imgUrl+oper+"</tr>";

  $("#successTable").append(tr);

  successCount++;
 }

}



function deleteRow(i){
 $("#row"+i).empty();
 $("#row"+i).remove();
}
</script>


<title>Insert title here</title>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
 <p> 
  <a href="javascript:$('#file_upload').uploadify('upload','*')">开始上传</a>  
  <a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消所有上传</a>
 </p> 
<table id="successTable">
 <tr>
  <td>文件名</td>
  <td>图片</td>
  <td>操作</td>
 </tr>
</table>
</body>
</html>

总结

简言之的说,最终的消除办法正是能够在各种援引的文书前面加个随机数,让它每回要求都带个参数,该难题则自动化解

您只怕感兴趣的稿子:

  • jQuery.uploadify文件上传组件实例讲明
  • jQuery文件上传控件 Uploadify 详解
  • php+jQuery.uploadify达成公文上传教程
  • jQuery文件上传插件Uploadify使用指南
  • Jquery Uploadify多文件上传带进度条且传递温馨的参数
  • 基于Jquery插件Uploadify实现实时显得进度条上传图片
  • 杀鸡取蛋jQuery上传插件Uploadify出现Http Error 302荒谬的秘技
  • jquery插件uploadify实现带进程条的文件批量上传
  • jQuery uploadify在Google和火狐浏览器上传战败的建设方案
  • firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
  • 详解jQuery uploadify文件上传插件的使用方式

本文由正版必中一肖图发布于关于计算机,转载请注明出处:uploadify在非IE核心浏览器下无法上传,jquery插件

上一篇:JS怎样判定是还是不是为ie浏览器的不二等秘书技 下一篇:没有了
猜你喜欢
热门排行
精彩图文