2

プラグインを使用せずに、jQuery を使用してファイルを非同期的にアップロードしたいと考えています。

JQueryは私にとって非常に新しいものであり、さまざまなフォーラムを見た後、次のコードになりました。

HTML:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">


$(document).ready(function(){

    $('#myform').submit(function() {

        var fileInput = document.getElementById('file');
        var file = fileInput.files[0];
        var formData = new FormData();
        formData.append('file', file);

        $.ajax({
            type: "POST",
            url: "upload.php",
            data: formData,
            processData: false,



            contentType: 'multipart/form-data',


                beforeSend: function (x) {
                        if (x && x.overrideMimeType) {
                            x.overrideMimeType("multipart/form-data");
                        }
                },

            success:function(msg){
                    //alert( "Data Uploaded: " + msg );
                document.getElementById('display').innerHTML = msg;

                }
            });

        return false;
    });


});

</script>
</head>

<body>
<form enctype="multipart/form-data" id="myform" name="myform" method="POST">
<input name="file" type="file" id="file" name="file"/>
<input type="text" name="txtValue" value="" id="txtValue">-->
<input type="submit" value="Upload" id="button" name="button"/>

<div id="display"></div>
</form>

</body>
</html>

PHP:

<?php

$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['file']['name']);

if (move_uploaded_file($_FILES['file']['tmp_name'], $file)) {
  $value = "success";
} 
else {
    $value = "error";
}


echo $value; 

?>

このコードは機能しておらず、「表示」DIV が「エラー」を出力するたびに発生します。私を助けてください。

4

4 に答える 4

1

HTML5 では、Ajax と jQuery を使用してファイルをアップロードできます。それだけでなく、ファイルの検証 (名前、サイズ、MIME タイプ) を実行したり、HTML5 プログレス タグ (または div) を使用してプログレス イベントを処理したりできます。

HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

必要に応じて、いくつかの検証を行うことができます。

$(':file').change(function(){
    var file = this.files[0];
    var name = file.name;
    var size = file.size;
    var type = file.type;
    //Your validation
});

これで、ボタンのクリックで Ajax が送信されます。

$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'upload.php',  //Server script to process data
        type: 'POST',
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
});

進行状況を処理したい場合。

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

SOURCE

于 2013-12-25T19:23:28.307 に答える
1

非表示の div を取ります。その div 内で を取得しiframe、フォームtargetを iframe の ID に設定します。

jQuery で。ドキュメント準備完了関数の後に、ロード イベント ハンドラー (LEH など) を iframe に追加します。そのため、フォームが送信され、ファイルがアップロードされ、iframe が読み込まれると、LEH が呼び出されます。

これは、成功イベントのように機能します。

注: 最初にページがロードされ、次に iframe もロードされるときと同様に、微調整を行う必要があります。そのため、初回チェックも行います。

于 2012-05-14T10:08:08.770 に答える
0

次のプラグインを使用して、ajaxを使用してファイルをアップロードできます。

  1. jQueryフォームプラグイン

  2. Uploadify

最初のリンクのプラグインは、いくつかの非常に便利なコールバックを提供します。所定のリンクでドキュメントを確認できます。

于 2012-05-14T11:14:02.127 に答える
0

プロジェクトにユーザー Jquery Form Plugin があります。JQuery 生の xhr オブジェクトは、xhr の新しいアップロード プロパティへの参照を持たない jqXhr オブジェクトにラップされます。以下の例から始めていただければ幸いです。html: 

 <input type="file" class="text-input" size="50" id="file_upload" value=""  name="file_upload"/>

var formData = new FormData($('form')[0]);
$.ajax({
url: '/files/add_file',  //server script to process data
type: 'POST',
xhr: function() {  // custom xhr
 myXhr = $.ajaxSettings.xhr();
 if(myXhr.upload){ // check if upload property exists
    //myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
}
return myXhr;
},
dataType: 'JSON',
beforeSend: beforeSendHandler,
success: function(data) {
    if (data.error){
       showMessage(data.html, false, false);
        }
    else{
       showMessage(data.html, false, false);
setTimeout("window.location = 'path/to/after/uploading';",450)
}
},
error: function(data) {
    showMessage(data.html, false, false);
},
// Form data
data: formData,
   //Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
于 2012-05-14T15:06:06.563 に答える