jQuery 플러그인 ajaxFileUpload
- 黄舟원래의
- 2016-12-13 11:41:22963검색
ajaxFileUpload는 파일을 비동기적으로 업로드하기 위한 jQuery 플러그인입니다.
알 수 없는 버전을 업로드하면 나중에 어디에서나 찾을 필요가 없습니다.
구문: $.ajaxFileUpload([options])
옵션 매개변수 설명:
url 업로드 핸들러 주소.
2.fileElementId 업로드해야 하는 파일 필드의 ID, 즉 3525558f8f338d4ea90ebf22e5cde2bc의 ID입니다.
3. secureuri 보안 제출 활성화 여부, 기본값은 false입니다.
4, dataType 서버가 반환하는 데이터 유형입니다. xml, 스크립트, json, html이 될 수 있습니다. 채우지 않으면 jQuery가 자동으로 결정합니다.
5, 성공은 제출 성공 후 자동으로 실행되는 처리 기능입니다. 매개변수 데이터는 서버에서 반환되는 데이터입니다.
6, error 제출 실패 시 자동으로 실행되는 핸들링 기능입니다.
7, 데이터 맞춤 매개변수입니다. 업로드한 이미지와 관련된 데이터가 있을 때 더욱 유용하게 사용됩니다.
8, 다음과 같이 입력하세요.
오류 메시지:
1, ; before 문 오류
이 경우 오류가 발생하는 경우 URL 경로를 확인해야 합니다. is available
2, SyntaxError: 구문 오류
이 오류가 발생하면 제출 작업을 처리하는 서버 백그라운드 핸들러에 구문 오류가 있는지 확인해야 합니다.
3, SyntaxError: 잘못된 속성 ID 오류
이 오류가 발생하면 텍스트 필드 속성 ID가 있는지 확인해야 합니다.
4, SyntaxError:missing } in XML 표현식 오류
이 오류가 발생하면 파일 이름이 일치하는지 확인해야 합니다. 또는 존재하지 않음
5. 기타 사용자 정의 오류
$error 변수를 사용하여 각 매개변수가 올바른지 직접 확인할 수 있습니다. 위의 잘못된 오류 메시지보다 훨씬 편리합니다.
사용 방법:
1단계: 먼저 jQuery 및 ajaxFileUpload 플러그인을 소개합니다. 말할 필요도 없이 순서에 주의하세요. 이는 모든 플러그인에 해당됩니다.
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>2단계: HTML 코드:
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>3단계: JS 코드
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
4단계: 백엔드 페이지 upload.aspx 코드:
protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = Request.Files;
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > 0)
{
files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
msg = " 成功! 文件大小为:" + files[0].ContentLength;
imgurl = "/" + files[0].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
}
}MVC 버전의 예를 들어보겠습니다.
컨트롤러 코드
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Upload()
{
HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
string imgPath = "";
if (hfc.Count > 0)
{
imgPath = "/testUpload" + hfc[0].FileName;
string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
}
return Content(imgPath);
}
}프런트 엔드 뷰, HTML 및 JS 코드, 업로드 성공 후 실제 반환 그림 주소를 a1f02c36ba31691bcfe87b2722de723b
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
의 SRC 주소에 바인딩합니다. 마지막으로 매개변수가 포함된 이미지를 업로드하는 예는 다음과 같습니다. 컨트롤러 코드:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Upload()
{
NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;
HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
string imgPath = "";
if (hfc.Count > 0)
{
imgPath = "/testUpload" + hfc[0].FileName;
string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
}
//注意要写好后面的第二第三个参数
return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
}
}인덱스 보기 code:
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
이 예는 비동기적으로 업로드된 이미지를 표시하는 동시에 사용자 정의 전송 매개변수를 팝업합니다.