jQuery 플러그인 ajaxFileUpload 사용 사례 분석-PHP开发-php.cn

AjaxFileUpload.js는 그다지 유명한 플러그인이 아닙니다. 단지 다른 사람이 작성하여 누구나 사용할 수 있도록 출시한 것입니다. 원칙은 숨겨진 양식과 iframe을 만든 다음 JS를 사용하여 제출하고 반환 값을 얻는 것입니다.

원래 비동기 업로드 기능을 구축했는데 그 구성 방식이 제가 아주 좋아하는 jQuery의 AJAX와 더 비슷해서 선택했습니다.

댓글에 적힌 내용은 안되네요. 그것은 우리가 동일한 js를 사용하지 않기 때문입니다. github에서 AjaxFileUpload를 검색해 보니 비슷한 js가 많이 발견되었습니다.

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

모르는 버전을 업로드하면 여기저기서 찾을 필요가 없습니다. 미래.

구문: $.ajaxFileUpload([options])

옵션 매개변수 설명:

url 업로드 핸들러 주소.　　
2.fileElementId　　　 업로드해야 하는 파일 필드의 ID, 즉 의 ID입니다.
3. secureuri 보안 제출 활성화 여부, 기본값은 false입니다.
4, dataType　　　 서버가 반환하는 데이터 유형입니다. xml, 스크립트, json, html이 될 수 있습니다. 채우지 않으면 jQuery가 자동으로 결정합니다.
5, 성공은 제출 성공 후 자동으로 실행되는 처리 기능입니다. 매개변수 데이터는 서버에서 반환되는 데이터입니다.
6, error　　　 제출 실패 시 자동으로 실행되는 핸들링 기능입니다.
7, 데이터 　　　　 맞춤 매개변수입니다. 업로드한 이미지와 관련된 데이터가 있을 때 더욱 유용하게 사용됩니다.
8, 유형 맞춤 매개변수를 제출할 때 이 매개변수를 post로 설정해야 합니다

오류 메시지:

1. 구문 오류: before 문 오류
이 오류가 발생하는 경우 해당 URL 경로에 접근 가능한지 확인이 필요합니다
2. SyntaxError: 구문 오류
이 오류가 발생하는 경우 해당 URL을 처리하는 서버 백그라운드 핸들러에 구문 오류가 있는지 확인해야 합니다. 제출 작업
3. SyntaxError: 잘못된 속성 ID 오류
이 오류가 발생하면 텍스트 필드 속성 ID가 존재하는지 확인해야 합니다.
4. SyntaxError: 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 코드는 업로드가 성공한 후 이미지의 실제 주소를 반환하고

<html>
<head>
  <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 () {
        if ($("#file1").val().length > 0) {
          ajaxFileUpload();
        }
        else {
          alert("请选择图片");
        }
      })
    })
    function ajaxFileUpload() {
      $.ajaxFileUpload
      (
        {
          url: &#39;/Home/Upload&#39;, //用于文件上传的服务器端请求地址
          secureuri: false, //一般设置为false
          fileElementId: &#39;file1&#39;, //文件上传空间的id属性 <input type="file" id="file" name="file" />
          dataType: &#39;HTML&#39;, //返回值类型 一般设置为json
          success: function (data, status) //服务器成功响应处理函数
          {
            alert(data);
            $("#img1").attr("src", data);
            if (typeof (data.error) != &#39;undefined&#39;) {
              if (data.error != &#39;&#39;) {
                alert(data.error);
              } else {
                alert(data.msg);
              }
            }
          },
          error: function (data, status, e)//服务器响应失败处理函数
          {
            alert(e);
          }
        }
      )
      return false;
    }
  </script>
</head>
<body>
  <p><input type="file" id="file1" name="file" /></p>
  <input type="button" value="上传" />
  <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>

로그인 후 복사

의 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);
  }
}

로그인 후 복사

인덱스 뷰 코드 :

<html>
<head>
  <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 () {
        if ($("#file1").val().length > 0) {
          ajaxFileUpload();
        }
        else {
          alert("请选择图片");
        }
      })
    })
    function ajaxFileUpload() {
      $.ajaxFileUpload
      (
        {
          url: &#39;/Home/Upload&#39;, //用于文件上传的服务器端请求地址
          type: &#39;post&#39;,
          data: { Id: &#39;123&#39;, name: &#39;lunis&#39; }, //此参数非常严谨，写错一个引号都不行
          secureuri: false, //一般设置为false
          fileElementId: &#39;file1&#39;, //文件上传空间的id属性 <input type="file" id="file" name="file" />
          dataType: &#39;json&#39;, //返回值类型 一般设置为json
          success: function (data, status) //服务器成功响应处理函数
          {
            alert(data);
            $("#img1").attr("src", data.imgPath1);
            alert("你请求的Id是" + data.Id + "   " + "你请求的名字是:" + data.name);
            if (typeof (data.error) != &#39;undefined&#39;) {
              if (data.error != &#39;&#39;) {
                alert(data.error);
              } else {
                alert(data.msg);
              }
            }
          },
          error: function (data, status, e)//服务器响应失败处理函数
          {
            alert(e);
          }
        }
      )
      return false;
    }
  </script>
</head>
<body>
  <p><input type="file" id="file1" name="file" /></p>
  <input type="button" value="上传" />
  <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>

로그인 후 복사

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

2013년 1월 28일입니다. 오늘 디버깅 과정에서 문제를 발견했습니다. 즉, 파일 필드()로서 반드시 name 속성이 없으면 서버는 업로드 후 이미지를 얻을 수 없습니다. 예: 올바른 쓰기 방법은

입니다. 2013년 1월 28일에 가장 전형적인 오류의 원인은 다음과 같습니다. 드디어 발견. 객체 함수(a,b){return new e.fn.init(a,b,h)}에는 'handleError' 메서드가 없습니다. 이는 Google 브라우저에서 보고된 오류입니다. 내 버전 문제인지 아닌지 실제 문제입니다. 이 문제의 근본 원인은 N번 업로드 후에 발견되었습니다. 대답은 다음과 같습니다. dataType 매개변수는 대문자여야 합니다. 예: 데이터 유형: 'HTML'.

2016-07-28, 댓글에 오류가 있습니다: TypeError: $.ajaxFileUpload는 함수가 아닙니다. 동일한 JS를 사용하고 있지 않습니다. 다른 AJAXFileUpload를 다운로드했습니다.