ajax 파일 업로드 ajax fileupload 사용 설명

잔말 말고 핵심 코드 세 션 HTML 부분 을 직접 보 여 줍 니 다.

<div class="form-group">
    class="col-sm-2 control-label">  ：
    name="WxQRCode" type="file" οnchange="fileUpload('WxQRCode');" id="WxQRCode">
    "hidden" name="wechat_code" id="wechat_code"/>
div>

JS 부분:

<script src="jquery-1.7.1.js" type="text/javascript">script>
<script src="ajaxfileupload.js" type="text/javascript">script>
<script type="text/javascript">
//  
function fileUpload(file) {
    var url = "        ";
    $.ajaxFileUpload( {
        url : url,//               
        //secureuri : false,      //     false
        fileElementId : file,    //       id    
        dataType : 'json',       //           json
        success : function(data, status) {
            if(data.error == 0){
                if(file == 'WxQRCode'){
                    $('#wechat_code').val(data.url);
                    $('#img-wechat').attr('src',data.url);
                }else{
                    $('#alipay_code').val(data.url);
                    $('#img-alipay').attr('src',data.url);
                }
            }
        }
    })
}
script>

PHP 부분:

if ($_FILES['WxQRCode']) {
    $upload = $this->getupload("/user/{$filedate}/", '', 'WxQRCode');//   
    if ($upload['file']) {
        $msg = json(array('error' => 0, 'url' => $upload['file']));
    } elseif ($upload['errno']) {
        $msg = json(array('error' => 1, 'message' => $upload['errmsg']));
    }
}

발생 할 수 있 는 문제: 1. Object function (a, b) {return new e. fn. init (a, b, h)} has no method 'handle Error', 이것 은 chrome 브 라 우 저 신문 의 오류 입 니 다. 이것 은 jQuery 버 전의 문제 입 니 다. jQuery 버 전 1.4.2 이전 버 전에 서 handler Error 방법 이 있 었 고 그 후에 존재 하지 않 았 기 때문에 ajax fileupload. js 마지막 에 handle Error 방법 을 추가 하면 해결 할 수 있 습 니 다.

 //     handleError
    handleError: function( s, xhr, status, e )      {
     // If a local callback was specified, fire it
      if ( s.error ) {
          s.error.call( s.context || s, xhr, status, e );
      }
      // Fire the global callback
      if ( s.global ) {
          (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
      }
  }

2. ajax fileupload 방법 을 호출 한 후 텍스트 선택 상자 의 값 을 잃 어 버 렸 습 니 다. 그림 을 선택 한 후 onchange 이벤트 에서 ajax fileupload 방법 을 호출 한 다음 배경 에서 그림 검 사 를 진행 합 니 다. 그러나 호출 후 텍스트 선택 상자 의 값 을 잃 어 버 렸 습 니 다. ajax fileupload 를 호출 하지 않 으 면 텍스트 선택 상자 에 그림 의 경로 가 표 시 됩 니 다 (IE 에 문제 가 있 지만 chrome 은 문제 가 없습니다).브 라 우 저 호환성 문제 입 니 다.ajax fileupload 의 원본 코드 를 보 았 습 니 다. 새 폼 을 자동 으로 생 성 한 다음 선택 한 파일 을 제출 합 니 다. 일부 코드 는 이 렇 습 니 다.

var oldElement = jQuery(files);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);

안전 을 고려 하여 IE 에서 jquery 의 clone 은 input field 의 값 을 복제 할 수 없 기 때문에 복제 후 새로운 input 는 원래 의 값 을 잃 어 버 렸 다.해결 방법: jQuery (form). submit () 를 찾 습 니 다.뒤에 이 네 마디 를 더 하면 원 리 는 제출 한 후에 요 소 를 다시 복사 하 는 것 이다.

var oldElement = jQuery('#jUploadFile' +id ,form);
var newElement =  jQuery('#'+s.fileElementId );
jQuery(newElement).replaceWith(oldElement);
jQuery(oldElement).attr('id', s.fileElementId );

마지막 으로 수 정 된 ajax fileupload. js 를 첨부 합 니 다.http://download.csdn.net/download/kunpeng1987/10132744