jQuery 플러그인 ajaxFileUpload-JS 튜토리얼-php.cn

jQuery 플러그인 ajaxFileUpload

黄舟

풀어 주다： 2016-12-13 11:41:22

원래의

965명이 탐색했습니다.

ajaxFileUpload는 파일을 비동기적으로 업로드하기 위한 jQuery 플러그인입니다.

알 수 없는 버전을 업로드하면 나중에 어디에서나 찾을 필요가 없습니다.

구문: $.ajaxFileUpload([options])

옵션 매개변수 설명:

url 업로드 핸들러 주소.　　
2.fileElementId　　　 업로드해야 하는 파일 필드의 ID, 즉 의 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:&#39;" + error + "&#39;, msg:&#39;" + msg + "&#39;,imgurl:&#39;" + imgurl + "&#39;}";
                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 코드, 업로드 성공 후 실제 반환 그림 주소를



    
    
    

<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>

로그인 후 복사

이 예는 비동기적으로 업로드된 이미지를 표시하는 동시에 사용자 정의 전송 매개변수를 팝업합니다.