jQuery 플러그인 ajaxFileUpload
- 高洛峰원래의
- 2016-12-12 17:29:271594검색
ajaxFileUpload.js 만들기가 쉽기 때문에 같은 이름을 가진 이름이 많이 있습니다.
저는 https://github.com/carlcarl/AjaxFileUpload를 사용합니다
다운로드 주소는 http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File입니다.
AjaxFileUpload.js는 그다지 유명한 플러그인이 아니며, 단지 다른 사람이 작성하여 누구나 사용할 수 있도록 출시된 것입니다. 원칙은 숨겨진 양식과 iframe을 만든 다음 JS를 사용하여 제출하고 가져오는 것입니다. 반환 값.
원래 비동기 업로드 기능을 구축했는데 그 구성 방식이 제가 아주 좋아하는 jQuery의 AJAX와 더 비슷해서 선택했습니다.
댓글에 적힌 내용은 안되네요. 그것은 우리가 동일한 js를 사용하지 않기 때문입니다. github에서 AjaxFileUpload를 검색해 보니 비슷한 js가 많이 발견되었습니다.
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>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/upload.aspx', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'file1', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
</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);
}
}인덱스 보기 코드:
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>