>  기사  >  웹 프론트엔드  >  Refresh_javascript 기술 없이 파일 업로드를 달성하기 위해 ajaxfileupload 플러그인을 사용하는 구체적인 방법

Refresh_javascript 기술 없이 파일 업로드를 달성하기 위해 ajaxfileupload 플러그인을 사용하는 구체적인 방법

WBOY
WBOY원래의
2016-05-16 17:32:241411검색

프로젝트 작업을 할 때 이런 문제가 발생했습니다. 일반 ASP.NET FileUpload 컨트롤을 사용하여 파일을 업로드하면 페이지가 새로 고쳐지고 페이지에 JS로 표기된 요소가 사라집니다. 파일을 업로드하면 페이지를 새로 고칠 수 없습니다. ajaxfileupload 플러그인을 사용하는 것이 좋습니다(플러그인 다운로드 주소: http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js)

ajaxfileupload는 jQuery용 플러그인입니다. 이 플러그인을 사용할 때는 jQuery.js 파일도 참조해야 합니다

코드로 이동

JS 코드

[javascript]

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

//실행 파일을 업로드하는 AJAX
$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: ' json',
성공: 함수(데이터, 상태) {
경고(데이터[0])
}
}); //AJAX를 실행하여 파일 업로드

$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: 'json',
성공: 함수(데이터, 상태) {
Alert(data[0]);
}
});

설명:
1. 이 방법은 잘 알려진 $.ajax 방법과 매우 유사합니다

2. 매개변수 설명

url: 프런트 데스크로부터 파일 데이터를 수신해야 하는 AJAX 배경 코드 파일

secureuri: 업로드된 파일을 암호화할지 여부

fileElementId: HTML의 업로드 컨트롤의 Id 값입니다. 여기서 백그라운드 코드는 이름-값 형식으로 데이터를 수신하므로 주의해야 합니다. 이름을 통해 데이터를 받습니다. ID 대신 데이터를 받습니다(기본적인 이유는 이 메서드가 자동으로 양식을 생성하고 처리를 위해 양식을 백그라운드 코드에 제출한다는 것입니다).

dataType: 데이터 유형, 일반적으로 'json'

성공: 업로드 성공 후 콜백 함수 실행

ASP.NET 일반 처리기의 코드

[csharp]


코드 복사 코드는 다음과 같습니다.
public void ProcessRequest (HttpContext context ) {
context.Response.ContentType = "text/html";//이것은 매우 중요합니다. 프론트 엔드 데이터 유형은 json이지만 여기에 html을 작성해야 합니다.
//파일 가져오기 프런트 엔드에서
HttpFileCollection files = HttpContext.Current.Request.Files;
//웹 사이트 디렉터리
files[0].SaveAs(context.Server.MapPath("/Web)에 파일을 저장합니다. /uploadFiles/Achievements.xls") );
//json 데이터 형식으로 표현된 프롬프트 반환
string result = "[" """ "Scores import 성공적으로" """ "]";
context .Response.Write(결과)

}
public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/html";//이것은 매우 중요합니다. 프론트 엔드 데이터 유형은 json이지만 여기에는 html을 작성해야 합니다
// 프론트 데스크에서 파일 가져오기
HttpFileCollection files = HttpContext.Current.Request.Files;
//웹 사이트 디렉터리에 파일 저장
files[0].SaveAs(context.Server.MapPath ("/ Web/uploadFiles/Achievements.xls"));
//json 데이터 형식으로 표현된 프롬프트 반환
string result = "[" """ "업적을 성공적으로 가져왔습니다" """ "]";
context.Response.Write(result);

}

이것은 AJAX 업로드 파일을 구현하며 필요한 경우 페이지가 새로 고쳐지지 않습니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.