ファイルのアップロード

このシナリオでは、wijupload コントロールを使用して、ユーザーがファイルをアップロードできるようにします。ここでは、 wijfileexplorer、wijdialog、および wijuploadを使用してファイルをフォルダにアップロードする方法について説明します。

1.HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトでは、wijupload および wijfileexplorer ウィジェットを使用して、ユーザーにファイルのアップロードを許可します。

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { //initialize wijupload widget $("#upload").wijupload({ }); //initialize wijfileexplorer widget $("#fileexplorer").wijfileexplorer({ actionUri: "fileexplorer.ashx", viewPaths: ["~/Example"], }); }); var upload = $("#upload").wijupload({ complete: closeDialogAndRefresh, totalComplete: closeDialogAndRefresh, action: "./upload.ashx?folder=~/Example", multiple: false }); //initialize wijdialog widget $('#dialog').wijdialog({ autoOpen: false, modal: true, resizable: true, width: 640, height: 400, buttons: { Close: function () { $(this).wijdialog("close"); } }, captionButtons: { pin: { visible: false }, refresh: { visible: false }, toggle: { visible: false }, minimize: { visible: false }, maximize: { visible: false } } }); //add function to upload file function showDialog() { var currentFolder = $("#fileexplorer").wijfileexplorer("option", "currentFolder"); //debugger; var action = "./upload.ashx?folder=" + currentFolder; $("#upload").wijupload("option", "action", action); $('#dialog').wijdialog({ title: "Upload to: " + currentFolder }).wijdialog("open"); } //add function to refresh file explorer function closeDialogAndRefresh() { $("#dialog").wijdialog("close"); $("#fileexplorer").wijfileexplorer("refresh"); } </script>

スクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
    //initialize wijupload widget
          $("#upload").wijupload({
          });
   //initialize wijfileexplorer widget
          $("#fileexplorer").wijfileexplorer({
              actionUri: "fileexplorer.ashx",
              viewPaths: ["~/Example"],
            });
    });
       var upload = $("#upload").wijupload({
            complete: closeDialogAndRefresh,
            totalComplete: closeDialogAndRefresh,
            action: "./upload.ashx?folder=~/Example",
            multiple: false
        });
   //initialize wijdialog widget
       $('#dialog').wijdialog({
            autoOpen: false,
            modal: true,
            resizable: true,
            width: 640,
            height: 400,
            buttons: {
                Close: function () {
                    $(this).wijdialog("close");
                }
            },
            captionButtons: {
                pin: { visible: false },
                refresh: { visible: false },
                toggle: { visible: false },
                minimize: { visible: false },
                maximize: { visible: false }
            }
       });
    //add function to upload file
       function showDialog() {
            var currentFolder = $("#fileexplorer").wijfileexplorer("option", "currentFolder");
            //debugger;
            var action = "./upload.ashx?folder=" + currentFolder;
            $("#upload").wijupload("option", "action", action);
            $('#dialog').wijdialog({ title: "Upload to: " + currentFolder }).wijdialog("open");
       }
    //add function to refresh file explorer
        function closeDialogAndRefresh() {
            $("#dialog").wijdialog("close");
            $("#fileexplorer").wijfileexplorer("refresh");
        }
    </script>

<body> タグ内に次のマークアップを追加して、ウィジェットを作成します。<div> 要素によって、wijfileexplorer、wijdialog、および wijupload ウィジェットが作成されます。

マークアップ	コードのコピー
<div id="fileexplorer"> </div> <div><img id="uploadButton" alt="Upload File" src="UploadFile.png" onclick="showDialog()" /></div> <div id="dialog"> <input id="upload" type="file" /></div>

アップロードするファイル名を入力して、［開く］をクリックします。右側で選択されているフォルダに、このファイル名が表示されます。

関連トピック

参照