jQuery 플러그인 ajaxFileUpload-PHP开发-php.cn

jQuery 플러그인 ajaxFileUpload

高洛峰

풀어 주다： 2016-12-12 17:29:27

원래의

1659명이 탐색했습니다.

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, 즉 의 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: &#39;/upload.aspx&#39;, //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: &#39;file1&#39;, //文件上传域的ID
                    dataType: &#39;json&#39;, //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        $("#img1").attr("src", data.imgurl);
                        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>

로그인 후 복사

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

로그인 후 복사

인덱스 보기 코드:



    
    
    

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

로그인 후 복사