jquery.MultiFileが実現するマルチファイルアップロードは、アップロードするファイル名のみをクライアントにアップロードしない方法をリストで示す.

jquery.MultiFileが実装したマルチファイルアップロードは、アップロードするファイル名のみをクライアントにリスト表示してアップロードしない方法
複数のファイルをアップロードする時ずっとクライアントでアップロードするファイルに対して制御を行うことを望んで、例えば重複するファイルをアップロードすることができなくて、アップロードするファイルに対して個数の制御を行うことができて、ファイルのタイプの制御、複数のアップロードするファイルを追加した後にリストの形式でクライアントのこの時に直接サーバーなどの機能に保存していないことを明示して、この機能を実現するためにネット上でいくつかのコントロールを探して、最後に同僚にjqueryを推薦しました.MultiFileは、このコントロールについて詳しく検討しました.
 
次は直接コードをつけます.
まずこのコントロールをダウンロードします(ネット上の多くはここでリンクを付けません)、コントロールがチェックインした後、次のJSファイルとCSSファイルを導入します.

 <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.js" type="text/javascript"></script>

    <script src="http://www.cnblogs.com/Resources/multiple-file-upload/documentation/documentation.js"

        type="text/javascript"></script>

    <link href="http://www.cnblogs.com/Resources/multiple-file-upload/documentation/documentation.css"

        rel="stylesheet" type="text/css" />

    <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.form.js" type="text/javascript"></script>

    <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.MetaData.js" type="text/javascript"></script>

    <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.MultiFile.js" type="text/javascript"></script>

$(function(){

 //                     

            if ($("#filePath").val() != "") {

                var ele = $("#filePath").val().split(',');

                for (var i = 0; i < ele.length; i++) {

                    //        ，           ，              

                    if (ele[i] != "") {

                        if ($("#CommandType").val() == "look") {

                            $('#file-Log').append('<li style="list-style-type:none" >' + ele[i].substr(ele[i].lastIndexOf("\\") + 1) + '<a href="javascript:void(0)" onclick="loadFile(this)"  name="lihre" value="' + ele[i] + '">    </a></li>')

                        }

                        else

                        {

                            $('#file-Log').append('<li style="list-style-type:none" ><a href="#" onclick="delFile(this)"  name="lihre" value="' + ele[i] + '"> x </a>' + ele[i].substr(ele[i].lastIndexOf("\\") + 1) + '</li>')

                        }

                    }

                }

<PRE class=javascript name="code"> //      

            $("#fileUpload").MultiFile({

                list: '#file-Log', //           ul 

                afterFileSelect: function (element, value, master_element) {

                    if ($("#filePath").val() != "") {

                        $("#filePath").val($("#filePath").val() + "," + value);

                    }

                    else {

                        $("#filePath").val(value);

                    }

                },

                afterFileRemove: function (element, value, master_element) {

                    var val = $("#filePath").val().replace(value, '');

                    $("#filePath").val(val);

                }

            })</PRE><BR>

})

<PRE></PRE>

<PRE class=html name="code"> //         data        

        function delFile(data) {

            //   filePath             

            var val = $("#filePath").val().replace(data.value, '');

            $("#filePath").val(val);

            //       li

            $(data.parentNode).remove();

        }

        //    

        function loadFile(data) {

            var path = escape(data.value);

            location.href = "AjaxHander.aspx?path="+path;

        }</PRE>

<P>html          file    ，  class    </P>

<P>&nbsp;</P>

<PRE class=html name="code"></PRE><BR>

<BR>

このコントロールを初めて研究したので、まだ分からないところがたくさんあります.ただ、使ったいくつかの場所を研究しました.皆さん、もっと研究して、交流してください.