간단한 jQuery 플러그인 ajaxfileupload.js는 ajax 업로드 파일 example_jquery를 구현합니다.

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

사용 지침

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

사용예

파일부분 포함 1

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

98a409b4e0dd20993c98e99a88ced0d82cacc6d41bbb37262a98f745aa00fbf0 c1a507ce4e25efe7d9a05acf2ed209252cacc6d41bbb37262a98f745aa00fbf0

2. HTML 부분

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

89b25275b4a8bb4532c41a2aa8161b05 11091c232b6ac165cead5133eec293a5 bec745fb82b804114c56a91be37fec35업로드65281c5ac262bf6d81768915a4a77ac0

동적 로딩 아이콘, 파일 필드, 버튼의 세 가지 요소만 필요합니다
참고: AjaxFileUpload 플러그인을 사용하여 파일을 업로드하는 경우 다음과 같은 양식이 필요하지 않습니다.

cc59bea3adee72cab5ddc898397ea2f4 ...관련 HTML 코드... 7a33799f8193b66b772692aa1ea9dc3c 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();
 }
}

코드 복사

코드는 다음과 같습니다.

100db36a723c770d327fc0aef2ce13b1
380064882a82bb0af55dfc376341d0e5
0c54930bea48f598f730c6be244850d72cacc6d41bbb37262a98f745aa00fbf0
         a787e67392ba4615922d8cf7af8591d02cacc6d41bbb37262a98f745aa00fbf0

c0d5943d5f5a3518cead006ce77a3dcf
        4ec11beb6c39d0703d1751d203c17053
            함수 ajaxFileUpload(){
$.ajaxFileUpload(
                                                    {
URL: 'update.do? 메소드 = 업로더', // 서버 주소에 연결해야 합니다
secureuri:false,
FileElementid: 'Housemaps', // 파일 선택 상자의 ID 속성
데이터 유형: 'xml', 'xml'                           성공: 기능(데이터, 상태)                                                                         ~                                                     ~                            $('#result').html('성공적으로 추가됨');
                 },
오류: 함수(데이터, 상태, e) // 동일                                              {
                           $('#result').html('추가 실패');
                }
            }
                                                                          );
                                                                                }

dc93b43a7fb9ae0dda9a22f85c17ba84
7179caff31ba7967e99850a4aa2c3bdf             bb12889be9509b7c88109280a7655834            5481467d3c96c8c4e590f8e17fa2b649
7a33799f8193b66b772692aa1ea9dc3c ca7204e18f1cb9313f7d7fb65b59687216b28748ea4df4d9c2150843fecfba68
 
7539a5d50064e8aaf214612c26dad1d3