MVC4+EasyUI를 기반으로 첨부 파일 업로드 구성 요소 uploadify 사용 개발

이 글은 주로 MVC4+EasyUI 기반 웹 개발 프레임워크의 첨부 파일 업로드 컴포넌트 uploadify의 사용법을 소개합니다. 필요한 친구들이 참고할 수 있습니다

1 업로드 컴포넌트 uploadify에 대한 설명 및 스크립트 참조

Uploadify는 JQuery입니다. Flash 기술을 사용하는 잘 알려진 업로드 플러그인인 Uploadify는 브라우저의 한계를 극복하고 전체 업로드 프로세스를 제어하며 새로 고침 없이 클라이언트 측 파일 업로드를 실현합니다. 이를 통해 클라이언트에서 업로드 진행 제어를 실현합니다. 따라서 먼저 Adobe의 Flash 플러그인이 브라우저에 설치되어 있는지 확인하십시오.

Uploadify에는 현재 두 가지 버전이 있는데, Flash 기반의 무료 버전과 HTML5 기반의 유료 버전도 있는데, 현재 버전은 v3.2.1입니다.

이 구성 요소에는 Jquery 라이브러리의 지원이 필요합니다. 일반적으로 아래와 같이 Jquery js 라이브러리를 추가해야 합니다.

<script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>

그러나 내 웹 개발 프레임워크는 EasyUI를 기반으로 하기 때문에 일반적으로 다음에서 참조됩니다. 웹 페이지 시작 부분 관련 클래스 라이브러리에는 아래와 같이 이미 Jquery 클래스 라이브러리가 포함되어 있습니다.

 @*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
  <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"></script>
  <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>

따라서 Javascript 클래스 라이브러리(jquery.uploadify.js)와 해당 스타일 파일(uploadify.css)만 추가하면 됩니다.

 @*添加对uploadify控件的支持*@
  @*<script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>*@
  
  

2 업로드 구성 요소 uploadify 웹 인터페이스 사용.

먼저 HTML 코드에 두 개의 컨트롤을 배치해야 합니다. 하나는 업로드용이고 다른 하나는 업로드된 목록 표시용이며, 아래와 같이 업로드 추가 및 업로드 작업 취소 버튼이 있습니다.

 <tr>
            <th>
              <label for="Attachment_GUID">附件上传：</label>
            </th>
            <td>              
              <p>
                <input class="easyui-validatebox" type="hidden" id="Attachment_GUID" name="Attachment_GUID" />
                <input id="file_upload" name="file_upload" type="file" multiple="multiple">
                <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" id="btnUpload" data-options="plain:true,iconCls:&#39;icon-save&#39;"
                  onclick="javascript: $(&#39;#file_upload&#39;).uploadify(&#39;upload&#39;, &#39;*&#39;)">上传</a>
                <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" id="btnCancelUpload" data-options="plain:true,iconCls:&#39;icon-cancel&#39;"
                  onclick="javascript: $(&#39;#file_upload&#39;).uploadify(&#39;cancel&#39;, &#39;*&#39;)">取消</a>
                <p id="fileQueue" class="fileQueue"></p>
                <p id="p_files"></p>
                <br />
              </p>
            </td>
          </tr>

인터페이스 효과 초기화는 다음과 같습니다.

물론 다음 단계에서는 아래와 같이 파일 업로드 초기화에 해당하는 작업 스크립트 코드를 추가해야 합니다.

<script type="text/javascript">
    $(function () {
      //添加界面的附件管理
      $(&#39;#file_upload&#39;).uploadify({
        &#39;swf&#39;: &#39;/Content/JQueryTools/uploadify/uploadify.swf&#39;, //FLash文件路径
        &#39;buttonText&#39;: &#39;浏 览&#39;,                 //按钮文本
        &#39;uploader&#39;: &#39;/FileUpload/Upload&#39;,            //处理文件上传Action
        &#39;queueID&#39;: &#39;fileQueue&#39;,            //队列的ID
        &#39;queueSizeLimit&#39;: 10,             //队列最多可上传文件数量，默认为999
        &#39;auto&#39;: false,                 //选择文件后是否自动上传，默认为true
        &#39;multi&#39;: true,                 //是否为多选，默认为true
        &#39;removeCompleted&#39;: true,            //是否完成后移除序列，默认为true
        &#39;fileSizeLimit&#39;: &#39;10MB&#39;,            //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
        &#39;fileTypeDesc&#39;: &#39;Image Files&#39;,         //文件描述
        &#39;fileTypeExts&#39;: &#39;*.gif; *.jpg; *.png; *.bmp;*.tif;*.doc;*.xls;*.zip&#39;, //上传的文件后缀过滤器
        &#39;onQueueComplete&#39;: function (event, data) {         //所有队列完成后事件
          ShowUpFiles($("#Attachment_GUID").val(), "p_files"); //完成后更新已上传的文件列表
          $.messager.alert("提示", "上传完毕！");                   //提示完成      
        },
        &#39;onUploadStart&#39; : function(file) {
          $("#file_upload").uploadify("settings", &#39;formData&#39;, { &#39;folder&#39;: &#39;政策法规&#39;, &#39;guid&#39;: $("#Attachment_GUID").val() }); //动态传参数
        },
        &#39;onUploadError&#39;: function (event, queueId, fileObj, errorObj) {
          //alert(errorObj.type + "：" + errorObj.info);
        }
      });
  </script>

위 스크립트에는 관련 속성을 한눈에 이해할 수 있습니다.

'uploader': '/FileUpload/Upload'

이 줄은 처리를 위해 파일을 MVC 작업에 제출하는 것입니다. 컨트롤러 FileUpload의 업로드에서 이를 처리할 수 있습니다.

또한 첨부 파일을 업로드한 후 업로드된 목록을 표시하도록 인터페이스를 업데이트해야 하며, 다음 기능 처리를 추가해야 합니다.

'onQueueComplete': function (event, data) {

마지막으로 주의할 점은 파일을 업로드할 때 인터페이스의 일부 요소 값을 동적으로 가져와 매개변수로 전달해야 한다는 것입니다. 그런 다음 파일 업로드에서 다음 처리를 수행해야 합니다. onUploadStart 함수.

$("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法规', 'guid': $("#Attachment_GUID").val() }); //动态传参数

3. 업로드 구성요소 uploadify의 C# 백그라운드 처리 코드

위의 전송 매개변수에서는 중국어 값을 사용했습니다. 그러면 백그라운드에서 중국어 문자가 깨집니다. 아래와 같이 컨트롤러의 Action 함수에서 콘텐츠 형식을 설정해야 합니다.

ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8";

FileUpload 컨트롤러의 전체 백그라운드 처리 작업 코드는 다음과 같습니다.

 public class FileUploadController : BaseController
  {
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Upload(HttpPostedFileBase fileData, string guid, string folder)
    {
      if (fileData != null)
      {
        try
        {
          ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
          ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
          ControllerContext.HttpContext.Response.Charset = "UTF-8";
          // 文件上传后的保存路径
          string filePath = Server.MapPath("~/UploadFiles/");
          DirectoryUtil.AssertDirExist(filePath);
          string fileName = Path.GetFileName(fileData.FileName);   //原始文件名称
          string fileExtension = Path.GetExtension(fileName);     //文件扩展名
          string saveName = Guid.NewGuid().ToString() + fileExtension; //保存文件名称
          FileUploadInfo info = new FileUploadInfo();
          info.FileData = ReadFileBytes(fileData);
          if (info.FileData != null)
          {
            info.FileSize = info.FileData.Length;
          }
          info.Category = folder;
          info.FileName = fileName;
          info.FileExtend = fileExtension;
          info.AttachmentGUID = guid;
          info.AddTime = DateTime.Now;
          info.Editor = CurrentUser.Name;//登录人
          //info.Owner_ID = OwerId;//所属主表记录ID
          CommonResult result = BLLFactory<FileUpload>.Instance.Upload(info);
          if (!result.Success)
          {
            LogTextHelper.Error("上传文件失败:" + result.ErrorMessage);
          }
          return Content(result.Success.ToString());
        }
        catch (Exception ex)
        {
          LogTextHelper.Error(ex);
          return Content("false");
        }
      }
      else
      {
        return Content("false");
      }
    }
    private byte[] ReadFileBytes(HttpPostedFileBase fileData)
    {
      byte[] data;
      using (Stream inputStream = fileData.InputStream)
      {
        MemoryStream memoryStream = inputStream as MemoryStream;
        if (memoryStream == null)
        {
          memoryStream = new MemoryStream();
          inputStream.CopyTo(memoryStream);
        }
        data = memoryStream.ToArray();
      }
      return data;
    }

4 웹 개발 프레임워크에서 업로드 구성 요소 업로드의 인터페이스 표시

웹 특정 업로드 컴포넌트가 위치합니다. 개발 프레임워크에서의 인터페이스 효과는 다음 그림과 같습니다. 전체 목록에 첨부 파일이 표시됩니다.

첨부파일 편집 및 업로드 인터페이스는 아래와 같습니다.

첨부정보 보기 효과는 다음과 같습니다.

위 내용은 MVC4+EasyUI를 기반으로 첨부 파일 업로드 구성 요소 uploadify 사용 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!