この記事では主に、MVC4+EasyUI に基づく Web 開発フレームワークの添付ファイル アップロード コンポーネント Uploadify の使用方法を紹介します。必要な方は参考にしてください。
1 アップロード コンポーネントの説明とスクリプト リファレンス。Uploadify は JQuery のよく知られたアップロード プラグインであり、Flash テクノロジーを使用して、ブラウザの制限を克服し、アップロード プロセス全体を制御し、更新せずにクライアント側でファイルのアップロードを実現します。これにより、クライアント上でアップロードの進行状況を制御できます。したがって、まず Adobe の Flash プラグインがブラウザにインストールされていることを確認してください。
Uploadify には現在 2 つのバージョンがあり、Flash ベースの無料バージョンと HTML5 ベースの有料バージョンもあります。私たちは無料バージョンを使用しており、現在のバージョンは v3.2.1 です。
ただし、私の Web 開発フレームワークは EasyUI に基づいているため、通常は で参照されます。 Web ページの先頭 関連するクラス ライブラリには、以下に示すように、Jquery クラス ライブラリがすでに含まれています。
@*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
したがって、必要なのは Javascript クラス ライブラリ (jquery.uploadify.js) とそのスタイル ファイル (uploadify.css) だけです。
@*添加对uploadify控件的支持*@ @**@
まず、HTML コードに 2 つのコントロールを配置する必要があります。1 つはアップロード用、もう 1 つはアップロードされたリストを表示するためのもの、およびアップロード操作を追加するためのボタンとアップロード操作をキャンセルするためのボタンです。以下に示します。
インターフェース効果の初期化は次のとおりです:
もちろん、次のステップでは、以下に示すように、ファイルアップロードの初期化に対応する操作スクリプトコードを追加する必要があります。
上記のスクリプトには、関連する属性が一目でわかります。理解できない場合は、公式 Web サイトにアクセスして確認することもできます。
'uploader': '/FileUpload/Upload'
この行は、処理のためにファイルを MVC アクションに送信するものであり、コントローラー FileUpload のアップロードで処理できることに注意してください。
'onQueueComplete': function (event, data) {
最後に注意すべきことは、ファイルをアップロードするときに、インターフェイス上のいくつかの要素の値を動的に取得してパラメータとして渡す必要があり、その後、次の処理を実行する必要があるということです。 onUploadStart関数。
$("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法规', 'guid': $("#Attachment_GUID").val() }); //动态传参数
上記の転送パラメータでは、通常の状況では中国語の文字化けがバックグラウンドで発生するため、以下に示すように、コントローラーの 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.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; }
特定のアップロード コンポーネントが配置されています。 開発フレームワークにおけるインターフェイスの効果は次のとおりです。 以下の図は、全体のリスト内の添付ファイルの表示です。
添付ファイルの編集およびアップロードのインターフェースは以下のとおりです。
添付ファイル情報の閲覧効果は次のとおりです:
以上がMVC4+EasyUIに基づいた添付ファイルアップロードコンポーネントuploadifyの使用を開発するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
