10

ユーザーが Web サイトにファイルをアップロードするために必要な手順の数を減らしたいと考えています。そのため、jQuery を使用して、以下のマークアップ (簡略化) を使用してファイルを開き、ポストバックします。

<a onclick="$('#uplRegistrationImage').click();">
    Change profile picture
</a>

<!-- Hidden to keep the UI clean -->
<asp:FileUpload ID="uplRegistrationImage" 
                runat="server" 
                ClientIDMode="static"
                Style="display:none"
                onchange="$('#btnSubmitImage').click();"    />

<asp:Button runat="server" 
            ID="btnSubmitImage" 
            ClientIDMode="static" 
            Style="display:none" 
            OnClick="btnSubmitImage_OnClick" 
            UseSubmitBehavior="False" />

これは、Firefox と Chrome では問題なく動作します。リンクがクリックされたときにファイル ダイアログを開き、ファイルが選択されたときにポストバックを起動します。

ただし、IE9 では、ファイルのアップロードが読み込まれ、ユーザーがファイルを選択した後。OnChange が機能する代わりに、「SCRIPT5 アクセスが拒否されました」というエラーが表示されます。任意のタイムアウトを設定して、間隔を設定して、ファイルが役に立たないかどうかを確認しようとしました。

これに関連して他にも多くの質問があります。ただし、まともな答えがあるようには見えません（ファイルダイアログを透明に設定し、ボタンの後ろに置くと言いました！）

他の誰かがこれを解決しましたか? または、IE ユーザーにボタンを提供することは絶対に必要ですか?

4

4 に答える 4

13

セキュリティ上の理由から、あなたがしようとしていることは不可能です。IE9 では、ファイル アップロード コントロールを実際にマウスでクリックしてトリガーしない限り、この方法でフォームを送信できないようです。

引数のために、コードを使用してchangeハンドラーで送信を行うことができましたが、自分でボタンをクリックした場合にのみBrowse機能しました。送信をトリガーする必要があることを示すハンドラー$(document).readyによって設定された変数のメソッドでポーリングを設定しましたが、これも機能しませんでした。change

この問題の解決策は次のようです。

  1. ボタンの後ろに配置されるようにコントロールをスタイリングします。あなたの質問でこれについて言及しましたが、ここで Romas が提供する答えIn JavaScript can I make a "click" event fire programmatically for a file input element? 実際には機能します（IE9、Chrome v23、およびFF v15で試しました）。
  2. Flash ベースのアプローチを使用する (GMail がこれを行います)。私はUploadifyデモを試してみましたが、非常にうまく機能しているようです。

ファイルアップロードのスタイリング:

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

参考文献:

jQuery : <input type="file" /> のクリックをシミュレートしても Firefox では機能しませんか?

Javascript を使用した IE9 ファイル入力トリガー

IE8 でアクセスが拒否されるというエラーが発生する

于 2012-11-15T05:47:51.360 に答える
3

ちょっと、このソリューションは機能します。ダウンロードには MSBLOB を使用する必要があります

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};
于 2016-07-01T07:04:53.323 に答える
2

この解決策はうまくいくようです。それを a でラップして<form>、jquery 変更ハンドラーに投稿する必要があります。おそらく、__eventtarget や iframe などを使用して form_load で処理する必要がありますが、これにより、ファイルを選択することができます。フォームを送信すると、フォームが送信されます。ただし、自宅に環境が整っていないため、テストできません。

http://jsfiddle.net/axpLc/1/

<a onclick="$('#inputFile').click();">
    Change profile picture
</a>
<div id='divHide'>

    <input id='inputFile' type='file' />

</div>


$('#inputFile').change(function() { alert('ran'); });

#divHide { display:none; }
于 2012-11-08T17:48:35.847 に答える
0

SLC が述べたように、<Form>タグを使用する必要があります。

まず、ファイルの量を指定する必要があります。入力フィールドによって決定する必要があります。2 番目のステップは、それらを配列にスタックすることです。

<input type="file" class="upload" name="fileX[]"/>

次に、ループを作成します。ループすることで、現在オンになっている入力フィールドに基づいて自動的に決定されます。

 $("input[@type=file]:nth(" + n +")")

次に、各ファイルが選択されていることに気付くでしょう。入力名をファイル名に置き換えます。これは、jQuery を介して複数のファイルを送信するための非常に基本的な方法です。

単品をご希望の場合：

$("input[@type=file]").change(function(){
   doIt(this, fileMax);
 });

これにより、最大ファイルが見つかった場所に Div が作成されます。に取り付けonEventます。上記の相関コードには、これらも必要です。

 var fileMax = 3;
 <input type="file" class="upload" name="fileX[]" />

これにより、DOM 親ツリーをナビゲートする必要があります。次に、それぞれフィールドを作成します。それは一つの方法です。もう 1 つの方法は、上記の SLC の方法です。それを行うにはかなりの数の方法があります。jQueryをどれだけ操作したいかだけですか？

うまくいけば、それが役に立ちます。あなたの質問を誤解した場合は申し訳ありません。

于 2012-11-12T21:31:12.650 に答える