간단한 jQuery 플러그인 ajaxfileupload.js는 ajax 업로드 파일 example

jQuery 플러그인 AjaxFileUpload는 ajax 파일 업로드를 실현할 수 있습니다. 플러그인은 사용이 매우 간단합니다. 먼저 AjaxFileUpload 플러그인을 올바르게 사용하는 방법을 배운 다음 몇 가지 일반적인 오류 메시지와 해결 방법을 알아보세요.

사용 지침

jQuery 라이브러리 파일과 AjaxFileUpload 라이브러리 파일을 사용해야 합니다

사용예

파일부분 포함 1

코드 복사 코드는 다음과 같습니다.

2. HTML 부분

코드 복사 코드는 다음과 같습니다.

동적 로딩 아이콘, 파일 필드, 버튼의 세 가지 요소만 필요합니다 

참고: AjaxFileUpload 플러그인을 사용하여 파일을 업로드하는 경우 다음과 같은 양식이 필요하지 않습니다. 

...관련 HTML 코드... AjaxFileUpload 플러그인이 자동으로 양식 제출 양식을 생성하기 때문입니다.

파일 파일 도메인 ID 및 이름의 경우 ajaxFileUpload 플러그인의 fileElementId 매개변수에서 파일 업로드 작업을 처리하는 경우 파일 도메인 이름을 알아야 합니다. 업로드된 파일 정보는 둘 사이의 관계가 명확해야 합니다.

3, 자바스크립트 부분

주요 매개변수 설명: 1. url은 파일 업로드 작업을 처리하기 위한 파일 경로를 나타냅니다. 위와 같이 URL에 직접 액세스할 수 있는지 테스트할 수 있습니다. upload.php 2. fileElementId는 위와 같이 파일 도메인 ID를 나타냅니다. fileToUpload

3. secureuri가 보안 제출을 활성화하는지 여부, 기본값은 false입니다

4. dataType 데이터, 일반적으로 javascript의 원래 생태인 json을 선택합니다

<script type="text/javascript"> 
function ajaxFileUpload (){ 
loading();//动态加载小图标 
$.ajaxFileUpload ({ 
url :'upload.php', 
secureuri :false, 
fileElementId :'fileToUpload', 
dataType : 'json', 
success : function (data, status){ 
if(typeof(data.error) != 'undefined'){ 
if(data.error != ''){ 
alert(data.error); 
}else{ 
alert(data.msg); 
} 
} 
}, 
error: function (data, status, e){ 
alert(e); 
} 
}) 
return false; 
} 
function loading (){ 
$("#loading ").ajaxStart(function(){ 
$(this).show(); 
}).ajaxComplete(function(){ 
$(this).hide(); 
}); 
} 
</script>

로그인 후 복사

5. 제출 성공 후 처리 기능

6. 오류 제출 실패 처리 기능

위의 두 가지 방법은 동적 로딩 작은 아이콘 프롬프트 함수 loading()과 ajaxFileUpload 파일 업로드 $.ajaxFileUpload() 함수인데, 이는 우리가 사용하는 jQuery.ajax() 함수와 유사하며 사용이 매우 간단합니다. , 여기서는 생략했습니다. PHP는 업로드된 파일을 처리하며 jQuery 플러그인 AjaxFileUpload를 사용하여 ajax 파일을 구현하는 것은 매우 간단합니다.

동시에 관련 오류 메시지를 알아야 합니다

1, 구문 오류: 구문 오류 이전;
이 오류가 발생하면 해당 URL 경로에 접근이 가능한지 확인이 필요합니다

2, SyntaxError: 구문 오류

이 오류가 발생하면 제출 작업을 처리하는 PHP 파일에 구문 오류가 있는지 확인해야 합니다

3, SyntaxError: 잘못된 속성 ID 오류

이 오류가 발생하면 속성 ID가 존재하는지 확인해야 합니다

4, SyntaxError: XML 표현식 오류에 }가 누락되었습니다

이 오류가 발생하면 파일 도메인 이름이 일치하는지, 존재하지 않는지 확인해야 합니다

5, 기타 사용자 정의 오류

$error 변수를 사용하여 각 매개변수가 올바른지 확인하기 위해 직접 인쇄할 수 있습니다. 이는 위의 잘못된 오류 메시지보다 훨씬 편리합니다.

jQuery 플러그인 AjaxFileUpload를 사용하여 새로 고침 없이 파일을 업로드하는 것은 매우 실용적입니다. 단순성과 사용 편의성으로 인해 이 플러그인은 다른 파일 업로드 플러그인에 비해 사용자 수가 가장 많기 때문에 매우 유용합니다. 적극 추천합니다.

처리 페이지:

다른 네티즌들의 추가 댓글:

페이지 코드:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class web_ajax_FileUpload : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
  HttpFileCollection files = HttpContext.Current.Request.Files;


  //if (files[0].ContentLength > 5)
  //{
  // Response.Write("{");
  // Response.Write("msg:'" + files[0].FileName + "',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  //else
  //{
  // Response.Write("{");
  // Response.Write("msg:'没有文件被上传',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  files[0].SaveAs("d:/adw.jpg");
  Response.Write("{");
  Response.Write("msg:'a',");
  Response.Write("error:''");
  Response.Write("}");

  //Response.Write("{");
  //Response.Write("msg:'ggg\n',");
  //Response.Write("error:'aa\n'");
  //Response.Write("}");
  Response.End();
 }
}

로그인 후 복사

코드 복사

코드는 다음과 같습니다.

저자별 최신 기사