jQuery 용 "Form Plugin"과 함께 Ajax 파일 업로드

Question

jQuery를 사용하고 있으며 Ajax로 파일을 업로드하고 싶습니다. 나는 몇몇 수색을하고 그것이 불가능하다는 것을 발견했다.

그러나 하나의 jQuery 플러그인 인 jQuery Form Plugin이있어 Ajax를 통해 파일을 업로드 할 수 있습니다.

아주 잘 작동하지만 특별한 문제가 있습니다. 여기 내 코드입니다 :

$('#question-form').submit(function() { 
    var serialAnswers = ''; 

    // Create a query string given some fields 
    // Format of the query string : answers[0][fr_fr][0]=a1fr&answers[0][fr_fr][1]=2&answers[0][en_uk][0]=a1en&answers[0][en_uk][1]=6&... 
    $('#question-answers > div').each(function(idx, elt) { 
     $('div[lang]', $(elt)).each(function(idxLang, eltLang) { 
      var lang = $(this).attr('lang'); 
      serialAnswers += 'answers[' + idx + '][' + lang + '][0]=' + $("[answerpart=display]", $(eltLang)).val(); 
      serialAnswers += '&answers[' + idx + '][' + lang + '][1]=' + $("[answerpart=value]", $(eltLang)).val() + '&'; 
     }); 
    }); 

    $(this).ajaxSubmit({ 
     datatype: "html", 
     type: "POST", 
     data: serialAnswers, 
     url: $(this).attr("action"), 
     success: function(retour) { 
      $('#res-ajax').html(retour); 
     } 
    }); 

    return false; 
}); 

당신이 볼 수 있듯이, 나도 같은 옵션과 더불어, $(this).ajaxSubmit() 호출하여 $.ajax 전화를 교체해야합니다. 또한, 일부 필드에 따라 PHP 코드로 전송하기 위해 쿼리 문자열 (코드에서 serialAnswers)을 만들어야합니다.

다음은 업로드 할 파일이 없었을 때했던 것입니다. 난 그냥 양식 필드를 직렬화 및 내 쿼리 문자열 이름 serialAnswers 추가 :

$.ajax({ 
    datatype: "html", 
    type: "POST", 
    data: $(this).serialize() + '&' + serialAnswers, 
    url: $(this).attr("action") 
    success: function(retour) { 
     $("#res-ajax").html(retour); 
    } 
}); 

을하지만 내 문제는 양식 플러그인 (PHP 파일에서) 내 추가 데이터 (쿼리 문자열) 그런 식으로 전송하는 것입니다 :

data: { key1: 'value1', key2: 'value2' } 

그러나 나는 JSON 오 내 쿼리 문자열을 변환하는 방법을 알고하지 않습니다

Array 
(
    [question_heading_fr_fr] => something 
    [question_heading_en_uk] => nothing 
    [question_type] => 5 
    [0] => a 
    [1] => n 
    [2] => s 
    [3] => w 
    [4] => e 
    [5] => r 
    [6] => s 
    [7] => [ 
    [8] => 0 
    [9] => ] 
    [10] => [ 
    [11] => f 
    [12] => r 
    [13] => _ 
    [14] => f 
    [15] => r 
    [16] => ] 
    .... 
) 

문서에 따르면,이 같은 데이터 옵션에 JSON 개체를 통과해야 bject 그리고 만약 PHP 측에서 배열로 해석된다면.

해결책이 있습니까?

편집 : 나는 iframe을를 사용하는 경우에도, 내가 양식에서 제공하지 않는 정보를 쿼리 문자열을 추가하는 방법을 모른다 (내 위의 코드에서 serialAnswer).

Answer 1

편집 : 나는 새로운 솔루션을 발견하고, 그것을 작동합니다 :) 내가 jQuery를 양식 플러그인을 수정 한

. 플러그인 페이지 : http://jquery.malsup.com/form/#getting-started. 스크립트 : 대신

$('#myform').submit(function() { 
    var queryString = 'answers[0][fr_fr][0]=a1fr&answers[0][fr_fr][1]=2&answers[0][en_uk][0]=a1en&answers[0][en_uk][1]=6'; 

    $(this).ajaxSubmit({ 
     dataType: 'html', 
     data: queryString 
    }); 

    return false; 
}); 

: 나는 플러그인 코드를 수정 한

$('#myform').submit(function() { 
    $(this).ajaxSubmit({ 
     dataType: 'html', 
     data: {'key':'value' } 
    }); 

    return false; 
}); 

이 구문을 사용하려면 https://github.com/malsup/form/raw/master/jquery.form.js

.

var n,v,a = this.formToArray(options.semantic); 
if (options.data) { 
    options.extraData = options.data; 
    for (n in options.data) { 
     if(options.data[n] instanceof Array) { 
      for (var k in options.data[n]) { 
       a.push({ name: n, value: options.data[n][k] }); 
      } 
     } 
     else { 
      v = options.data[n]; 
      v = $.isFunction(v) ? v() : v; // if value is fn, invoke it 
      a.push({ name: n, value: v }); 
     } 
    } 
} 

을 그리고 모든 if (options.data)과 그 내용을 삭제 :

이를 찾습니다.

var q = $.param(a); 

를 그리고 후에이 권한을 추가 :이 사람 후 몇 줄이 찾을

var extraInputs = []; 
try { 
    if (s.extraData) { 
     for (var n in s.extraData) { 
      extraInputs.push(
       $('<input type="hidden" name="'+n+'" value="'+s.extraData[n]+'" />') 
        .appendTo(form)[0]); 
     } 
    } 

    // Add iframe to doc and submit the form 
    $io.appendTo('body'); 
    io.attachEvent ? io.attachEvent('onload', cb) : io.addEventListener('load', cb, false); 
    form.submit(); 
} 

그리고 대체 :

함수 파일 업로드 (에서

if (options.data) { 
    options.extraData = options.data; 
    q += '&' + options.data; 
} 

),이를 찾을 수 그것 :

var extraInputs = []; 
try { 
    if (s.extraData) { 
     var couples = s.extraData.split('&'); 
     for (var c=0 ; c < couples.length ; c++) 
     { 
      var couple = couples[c].split('='); 
      extraInputs.push(
       $('<input type="hidden" name="'+couple[0]+'" value="'+couple[1]+'" />') 
        .appendTo(form)[0]); 
     } 
    } 

    // add iframe to doc and submit the form 
    $io.appendTo('body'); 
    io.attachEvent ? io.attachEvent('onload', cb) : io.addEventListener('load', cb, false); 
    form.submit(); 
} 

이제 당신은 할 수 있습니다. 이러한 수정 및 이미지 업로드를 통해 쿼리 문자열을 동시에 추가 할 수 있습니다.

Answer 2

나는 당신이 찾고 정확히 모르겠지만 왜 당신은 할 수 없습니다

는 PHP 측에서 그런

data: {'key1':$(this).serialize(),'key2': serialAnswers} 

는 당신이 PHP를 디코딩

json_decode($arr); //Where $arr is whatever the array is that gets passed 

당신이 필요로하는 경우

json_encode($arr); //Where arr is an array you build within your script 

나는 당신이 원하는 것으로 가정하고 있습니다.

Answer 3

시도 Uploadify. 이것은 Flash 기반 업로드 플러그인입니다. 구현하기 쉽고 여러 파일 업로드를 지원합니다.