비동기 이미지 전송 샘플 코드를 구현하기 위해 Thinkphp와 ajaxFileUpload를 결합한 자세한 설명

이 글에서는 Thinkphp를 ajax와 결합하여파일업로드하여 비동기 이미지 전송을 구현하는 방법을 주로 소개합니다. 이 글에서는 필요한 모든 사람에게 확실한 참고 가치가 있는 자세한 샘플 코드를 제공합니다. 아래에서 함께 살펴보세요.

머리말

이 프로젝트를 하기 전에는 항상 이미지 업로드 처리는 파일 전송을 위해 폼 제출을 직접 사용하는 것이었습니다. 이번에는 요청에 따라 구현해야 합니다. 사진의 비동기 전송은 구현하기 어렵지 않습니다. 플러그인이 너무 많지만 여전히 디버깅 시간을 많이 낭비하는 이유는 오류가 자주 발생하는 고대 플러그인 ajaxfileupload를 사용했기 때문입니다. 처음 사용하기 시작했을 때 핸들러는 함수가 아닙니다.

무거운 마음으로 바이두를 검색해보니 검색엔진색인이 정말 강력하다는 걸 느낄 수 있었습니다.

해결 방법

위 오류가 발생하는 이유는 jquery가 1.9.0부터 더 이상 핸들러 메서드를 사용하지 않기 때문입니다. 알 수 없으므로 다운로드한 jQuery.extend({:

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] );
}
}

에만 수동으로 코드를 추가할 수 있습니다.

$.ajaxfileupload({

　　url : '',

　　secureuri : '',

　　fileElementId : '', --> 这里填的是 input file的ID

　　data : {},

　　dataType : 'json',

　　complete : function(data){}　

})

코드에서 더 이상 오류가 보고되지 않았지만 새로운 문제가 발생했습니다. 반환된 데이터가 항상 정의되지 않았습니다. 그런 다음 디버깅 도구를 확인한 결과 반환 값이 존재하고 형식이 정상임을 알 수 없었습니다. 나가서... ............ Baidu,

그런 다음 두 가지 조정을 수행했습니다.

1, ajaxfileupload 변경 .js eval('data = '+  data) ; 를 data = jQuery.parseJSON(jQuery(data).text());

2로 바꾸고, 전체 메서드를 Success

ok로 바꾸면 백엔드에서 반환된 데이터를 인쇄할 수 있습니다.

요약

위 내용은 비동기 이미지 전송 샘플 코드를 구현하기 위해 Thinkphp와 ajaxFileUpload를 결합한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!