집 > 기사 > 웹 프론트엔드 > jquery 플러그인 uploadify 사용에 대한 자세한 설명

jquery 플러그인 uploadify 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-23 11:30:166573검색

이번에는 jquery 플러그인 uploadify 사용에 대한 자세한 설명을 가져왔습니다. jquery 플러그인 uploadify 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

가끔 프로젝트에 파일 일괄 업로드 기능이 필요할 때, Uploadify가 빠르고 쉬운 해결책이라고 생각합니다. 참고용으로 공유합니다. 자세한 내용은 다음과 같습니다

먼저 렌더링은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

페이지는 다음과 같습니다

전체 페이지 코드

<%@ 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">
  <p id="fileQueue" class="fileQueue"></p>
  <p>
   <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="$(&#39;#file_upload&#39;).uploadify(&#39;cancel&#39;)" value="取消" />
   </p>
   <p id="p_show_files"></p>
  </p>
 </form>
</body>
</html>

UploadHandler.ashx 코드:

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

파일 업로드와 마찬가지로 기본적으로 크기 제한이 있습니다. IIS에서는 기본 요청 크기를 30M로 제한합니다. 예를 들어 IIS를 수정하고 싶지 않지만 이 크기 제한을 초과하려면 1GB 파일을 업로드하세요.

이는 Web.config를 수정하여 달성할 수 있습니다.

<?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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!