Solution: jQueryuploadify cannot be uploaded in a non-IE core browser _ jquery

Source: Internet
Author: User
Previously, I uploaded a multi-file upload through Flash, but it runs normally in IE, and FireFox cannot upload normally. After repeated research and study, firefox and 360 browsers cannot run normally because FireFox, chrome, and 360 browsers that support HTML5 do not automatically include session information and cookies when uploading files, do not share sessions. I. jquery uploadify self-introduction:

(1) Hello everyone, I am a plug-in the jquery plug-in family responsible for implementing asynchronous upload. I am not the only plug-in, but it is a good one.

(2) My functions:

Supports single-file or multi-File Upload to control the number of concurrently uploaded files

Supports the use of various languages on the server, such as PHP,. NET, Java ......

You can set the upload file type and size limits through parameters.

You can specify whether to select a file and then upload it automatically.

It is easy to expand and can control the callback functions (onSelect, onCancel…) in each step ......)

Control the appearance through interface parameters and CSS

Uploadify Home Address: http://www.uploadify.com/on this page you can learn more about him.

(3) My usage:

Go to baidu.com, google.com search, a lot.

2. I have a fault in firefox. Is it my problem?

Jquery uploadify can be uploaded normally under ie. During asynchronous upload, each file is submitted to the server for a request. Each request requires security verification, session and cookie verification. Yes, that's it. Because jquery uploadify uploads data using flash, ie automatically binds local cookie storage to the server every time a data stream request is sent to the backend. But firefox and chrome won't do this, and they will think this is not safe. Haha, that's why.

After finding the cause, let's understand two concepts:

(1) session:

Session, also known as Session status, is the most common status in the Web system and is used to maintain information related to the current browser instance. For example, we can put the username of the logged-on user in the Session, so that we can determine whether the user is logged on by judging a Key in the Session. If the user is logged on, the username is the same.

We know that Session is a "one-person copy" for each client (or browser instance). When a user establishes a connection with the Web server for the first time, the server will distribute a SessionID to the user as the identifier. SessionID is a random string consisting of 24 characters. Each time a user submits a page, the browser will include this SessionID in the HTTP header and submit it to the Web server, so that the Web server can distinguish the client of the current request page. Which of the following modes are provided for storing SessionID in ASP. NET 2.0!

(2) Cookies, sometimes in the form of Cookies, refer to the data (usually encrypted) stored on the user's local terminal for some websites to identify users and track sessions ).

Iii. Solutions

1.asp.net Environment

In the Global. asax file, write the following code:

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 {} // authentication. 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); // reset the cookie value in the request and assign the session value on the server to it}

/* --------------------------- Aspx page code ---------------------------------*/

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

Save the session value and authentication value to the client control. Then you can get the two values through js and then pass them to the following plug-in js initialization program.

(The reason why the session value is stored in the control is that the client may disable the cookie .)

/* ----------------------------- The following is the js Code ----------------------------------*/

  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 },

You can view the official Configuration documentation for more configuration items.

During plug-in initialization, pass the locally recorded session value and authentication value to the initialization method and assign values to parameters. In this way, each time an asynchronous request uploads a file, the corresponding session value is included in the request file.

2. C # Environment

The above is the solution under asp.net, So how should we deal with it in C?

I solve this problem in this way, so that all the code for uploading files does not need to be modified, and the modification is minimal, but there is a security risk:

If (this. loginInfo = null) {// solve the uploadify-compatible Firefox Google browser upload problem // However, this code poses a security risk to the system, the Flash program requests the system without verification // to solve this security risk, the Flash program needs to pass the user name and password for verification, however, the user name and password cannot be written at the front end so that the user can see if (Request. userAgent = "Shockwave Flash") {return;} else {filterContext. result = RedirectToAction ("LoginAgain", "Account", new {Area = "Auth"}); return ;}}

Our system is ASP. net mvc. Although users can be invisible to sensitive information through encryption, malicious users can bypass system verification without decrypting sensitive information.

The verification information cannot be directly written to the front-end. You can use ajax to obtain the verification information from the back-end and then pass it to flash for verification in the interceptor.

After modification:

JS Code:

Ajax requests the background to obtain the user name and send it to 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, // The userName pwd: data obtained by ajax. data. pwd // password obtained by ajax}, buttonText: 'select file upload', fileSizeLimit: '4mb', fileTypeDe SC: 'file', fileTypeExts :'*. * ', queueID: 'filequeue', multi: true, onUploadSuccess: function (fileObj, data, response) {var d = eval ("(" + data + ")"); $ (". uploadify-queue-item "). find (". data "finished .html (" uploaded "); $ (" # url "). val (d. url); $ ("# name "). val (d. name) ;}, onUploadError: function (event, ID, fileObj, errorObj) {if (event. size> 4*1024*1024) {alert ('exceeds the file upload size limit (4 MB )! '); Return;} alert ('upload failed') ;}}); // end uploadify }}) ;}); // end $

Code in the Interceptor:

...... If (this. loginInfo = null) {// solve the uploadify-compatible Firefox Google browser upload problem // However, this code poses a security risk to the system, the Flash program requests the system without verification // to solve this security risk, the Flash program needs to pass the user name and password for verification, however, the user name and password cannot be written at the front end so that the user can see 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 Solution

<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %><% String syscontext = request. getContextPath (); %> <% String path = request. getContextPath (); String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path; String sessionid = session. getId (); %>
 
 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.