Développer l'utilisation du composant de téléchargement de pièces jointes uploadify basé sur MVC4+EasyUI-Tutoriel C#.Net-php.cn

Cet article présente principalement l'utilisation du composant de téléchargement de pièces jointes uploadify du framework de développement Web basé sur MVC4+EasyUI. Les amis dans le besoin peuvent se référer aux

1. le composant de téléchargement uploadify Et la référence du script

Uploadify est un plug-in de téléchargement bien connu pour JQuery Utilisant la technologie Flash, Uploadify surmonte les limitations du navigateur et contrôle l'ensemble du processus de téléchargement, ne réalisant aucun rafraîchissement sur le téléchargement du fichier, réalisant ainsi le contrôle de la progression du téléchargement sur le client, vous devez donc d'abord vous assurer que le plug-in Flash d'Adobe a été installé dans le navigateur.

Uploadify a actuellement deux versions, une version gratuite basée sur Flash et une version payante basée sur HTML5. Nous utilisons la version gratuite, et la version actuelle est la v3.2.1.

Ce composant nécessite le support de la bibliothèque Jquery Généralement, vous devez ajouter la bibliothèque Jquery js, comme indiqué ci-dessous

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

Copier après la connexion

Mais parce que. de mon Le framework de développement Web est basé sur EasyUI. Généralement, la bibliothèque de classes appropriée sera référencée au début de la page Web, qui comprend déjà la bibliothèque de classes Jquery, comme indiqué ci-dessous.

 @*添加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>

Copier après la connexion

Il suffit donc d'ajouter la bibliothèque de classes Javascript (jquery.uploadify.js) et son fichier de style (uploadify.css) :

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

Copier après la connexion

2. Utilisation du composant de téléchargement uploadify dans l'interface Web

Nous devons d'abord l'ajouter. HTML Deux contrôles sont placés dans le code, l'un pour le téléchargement, l'autre pour afficher la liste téléchargée et l'autre est l'opération du bouton pour ajouter et annuler le téléchargement, comme indiqué ci-dessous.

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

Copier après la connexion

L'initialisation de l'effet d'interface est la suivante :

Bien sûr, nous devons ajouter le correspondant fichiers à l'étape suivante Téléchargez le code du script de l'opération d'initialisation comme indiqué ci-dessous.

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

Copier après la connexion

Dans le script ci-dessus, il y a des commentaires. Vous pouvez comprendre les attributs pertinents en un coup d'œil. Si vous ne comprenez pas, vous pouvez également accéder au. site officiel pour le savoir. Il convient de noter que la ligne

&#39;uploader&#39;: &#39;/FileUpload/Upload&#39;

Copier après la connexion

consiste à soumettre le fichier à l'action MVC pour traitement. Nous pouvons le gérer dans le téléchargement du contrôleur FileUpload.

De plus, une fois la pièce jointe téléchargée, nous devons mettre à jour l'interface pour afficher la liste téléchargée, puis nous devons ajouter la fonction de traitement suivante.

&#39;onQueueComplete&#39;: function (event, data) {

Copier après la connexion

La dernière chose à noter est que lors du téléchargement de fichiers, nous devons obtenir dynamiquement les valeursde certains éléments sur l'interface et les transmettre comme paramètres, alors nous devons effectuer le traitement suivant dans la fonction onUploadStart.

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

Copier après la connexion

3. Le code de traitement en arrière-plan C# du composant de téléchargement uploadify

est transmis ci-dessus. Dans les paramètres, j'ai utilisé des valeurs chinoises. Dans des circonstances normales, cela entraînera des caractères chinois tronqués en arrière-plan, nous devons donc définir son format de contenu dans la fonction Action du contrôleur, comme indiqué ci-dessous.

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

Copier après la connexion

Le code d'action complet du traitement en arrière-plan du contrôleur FileUpload est le suivant :

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

Copier après la connexion

4. L'affichage de l'interface du composant de téléchargement uploadify dans le cadre de développement Web

L'effet d'interface spécifique du composant de téléchargement dans le cadre de développement Web est le suivant. L'image ci-dessous est l'image globale de l'affichage des pièces jointes dans la liste.