11

jquery.form.js jQuery APIを使用して、ファイルイメージフィールドを含むフォームデータをシリアル化しようとしています。APIは、画像を含むデータフィールドを固定し、画像オブジェクトを次のように返すのに役立ちます[object file]

これがシリアル化のための私のコードです

    var data = $js("form[name=ajx_imgupload]").formSerialize();
    var img = $js("#upload_image").fieldSerialize();

    $js.ajax({
                 url: "index.php?option=com_obituary&task=upload",
                 type: "POST",
                 dataType:"json",
                 data: data,
                 beforeSend: function(){
                   $js(".loadingblock").show();
                 },
                 complete: function(){
                   $js(".loadingblock").hide();
                 },
                 success: function(res){
                   alert();  
                 },
                 error: function(jqXHR, textStatus, errorThrown){
                   alert(textStatus);                
                 }
           });

問題で立ち往生しています...助けていただければ幸いです。

ありがとう

4

4 に答える 4

9

手伝わせてください。ちょうど1日前に作りました。画像フィールドを含むフォームがあります。アップロード画像を送信するとjquery.form.js

注：jqueryimageupload.phpを使用してファイルをアップロードしています。必要に応じて、貼り付けることができます。これは単純なphpファイルのアップロードです。http://www.w3schools.com/php/php_file_upload.asp

html部分：

<form name="imageform" id="imageform" action="jqueryimageupload.php" method="post">
  <input type="file" name="resim" id="img" onchange="ImageUpload()" />
  <input type="hidden" name="action" value="imageup" />
</form>

jquery：

function ImageUpload() {
    $("#return").show();
    $("#return").html('');
    $("#return").html('<img src="images/load2.gif" alt="Uploading...."/> wait, uploading...');
    $("#imageform").ajaxForm({
        target: '#return',
        success: function() {
            $("#return").fadeOut(10000);
        }
   }).submit();     
}

最後にフォームを送信します。

$('#form').submit(function() {
    var img=$('#image').val();
    var forms=($(this).serialize());
    $.ajax({
        type:"POST",            
        url: "do.php?do=upload",
        data:forms+'&r='+encodeURIComponent(img),
        success: function(result){ //your code }     
    });
 });
于 2012-09-04T12:18:33.587 に答える
9

この方法を使用できます（http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/から）

$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
  } );

より柔軟で簡単な方法です

于 2014-05-26T06:26:32.247 に答える
0

HTML

<!--Add Inventory Form-->

<div id="addInventoryFormHTML" class style="display:none">

    <!--Form-->
    <form id="addInventoryForm" novalidate="novalidate" enctype="multipart/form-data">

        <input id="itemTitleField" class="textField addInventoryField" name="itemTitleField" type="text" placeholder="Item Title"/>

        <textarea id="itemDescriptionField" class="textAreaField addInventoryField" name="itemDescriptionField" type="textarea" placeholder="Item Description"></textarea>

        <input id="itemPictureField" class="uploadField addInventoryField" name="itemPictureField" type="file"/>

    </form>

    <!--Errors-->
    <div id="inventoryAddErrors"></div>

</div>

Javascript（selfに続くメソッドはインスタンスメソッドであることに注意してください。私はJooseを使用します）

$(form).ajaxSubmit({//note that form is just the form built with a jQuery selector

            url: self.returnBaseULR() + '/ajaxadd',

            type: 'POST',

            error: function(xhr, status, error) {
                console.log('Unable to contact the server');
            },

            success: function(response){

                var jsObjectFromResponse = JSON.parse(response);

                if(jsObjectFromResponse.success){

                    self.cLog('Item uploaded successfully!');
                    document.location.reload();

                } else {

                    self.cLog('Listing failed, see AJAX response');

                }

            }

        });

jQueryのネイティブメソッドだけを使用して画像をアップロードすることはできません。http://jquery.malsup.com/form/をチェックしてください

それはあなたのためにこれを完璧に行うメソッドを持っています。

それは私にとってはうまくいくようです。バックエンドでは、$ _ POSTを使用してPOSTパラメーターを取得し、$ _ FILES（またはそのようなもの）を使用してファイルを取得できます。

ajaxSubmitは、シリアル化されたデータが自動的に実行されたフォームを即座に投稿するようです。

お役に立てば幸いです。

于 2012-09-04T11:48:58.360 に答える
0

ファイルのアップロードにajaxを使用することはできません。ただし、効果をシミュレートするために、非表示のiframeにフォームを.submit()作成し、アップロードURLに送信/送信することができます。

多かれ少なかれこのように。

于 2012-09-04T11:51:41.290 に答える