Angularjs에서 파일을 업로드하는 방법은 무엇입니까? Anglejs에서 파일을 업로드하는 ng-file-upload에 대한 자세한 설명

이 글에서는 주로 angularjs를 사용한 파일 업로드 소개를 소개합니다. Anglejs 파일 업로드 방법을 자세히 소개합니다. 이제 이 글을 살펴보겠습니다

ng-file-upload

angular-file-upload는 브라우저를 지원하지 않는 FileAPI 폴리필용으로 설계된 경량 AngularJS 파일 업로드 도구이며 HTML5를 사용하여 파일 업로드를 직접 업로드합니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 개발 매뉴얼을 방문하세요.)

Features

• 업로드 진행 지원, 업로드 시 취소 또는 중단 가능, 파일 드래그 앤 드롭 지원(HTML5 ), 디렉토리 드래그 앤 드롭(weikit), CORS, PUT(html5)/POST 방법 PUT(html5)/POST 方法

• 支持使用 Flash polyfill FileAPI  跨浏览器上传 (HTML5 和 non-HTML5) 。允许客户端在上传之前验证或者修改文件。

• 当文件的内容类型使用 $upload.http()时，支持直接上传到 CouchDB，imgur 等等。支持 Angular httpPOST/PUT 请求的进度事件，更多内容请看 #88(comment) 

• Separate shim file loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed for progress event in HTML5 browsers)

• 轻量级，使用常规的 $http 来上传（支持非 HTML5 浏览器），所以提供所有 Angular $http

은 Flash 폴리필 FileAPI 크로스 브라우저 업로드(HTML5 및 비HTML5) . 업로드하기 전에 클라이언트가 파일을 확인하거나 수정할 수 있도록 허용합니다.

파일의 콘텐츠 형식이 $upload.http()를 사용하는 경우 CouchDB, imgur 등에 직접 업로드를 지원합니다. Angular httpPOST/PUT 요청에 대한 진행 이벤트를 지원합니다. 자세한 내용은 #88(설명)을 참조하세요.

에 대한 요청 시 별도의 shim 파일이 로드됩니다. HTML5 지원이 필요한 경우 추가 로드/코드가 없음을 의미하는 비-HTML5 코드(html5-shim.js는 여전히 지원됩니다. HTML5 브라우저의 progress 이벤트에 필요)

경량, 일반 $http를 사용하여 업로드하세요(HTML5가 아닌 브라우저 지원). 모든 Angular $http 기능이 제공됩니다.

예제

필요한 js 파일은 여기에서 다운로드할 수 있습니다: https://github.com/danialfarid/ng-file-upload

     
    文件上传
     
    
    
    
    
          
                            
    
        uploadImg

간단한 테스트

여기에 저장된 데이터는 우리입니다. 파일을 업로드할 때 필요합니다.
전체 예제가 성공적으로 업로드되었으며 페이지에서 미리 볼 수 있습니다.

public class UploadFile : IHttpHandler
    {        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";            var paras = context.Request.Params["data"];
            JObject jobj = JObject.Parse(paras);            string strUserName = jobj["username"].ToString();
            HttpFileCollection files = context.Request.Files;            if (files.Count > 0)
            {                var file = files[0];                string fileExt = Path.GetExtension(file.FileName);                string fileNewName = Guid.NewGuid() + fileExt;                string strRelativeDir = "/Upload/" + strUserName;                string strDir = context.Request.MapPath(strRelativeDir);                if (!Directory.Exists(strDir))
                {
                    Directory.CreateDirectory(strDir);
                }                string strSavePath = Path.Combine(strDir, fileNewName);
                file.SaveAs(strSavePath);
                context.Response.Write(Path.Combine(strRelativeDir, fileNewName));
            }
        }        public bool IsReusable
        {            get
            {                return false;
            }
        }

}

🎜🎜🎜🎜🎜Summary🎜🎜🎜ng-file-upload를 사용하면 Anglejs와 잘 결합될 수 있습니다. 사용하면서 Angularjs와 관련된 파일업로드 예시를 찾아보았는데, 브라우저가 HTML5를 지원한다면 진행바를 생성해 주는 것도 매우 편리할 수 있습니다. 모두에게 추천합니다. 🎜🎜🎜🎜이 기사는 여기서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 🎜AngularJS 사용자 매뉴얼🎜을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요. 🎜

위 내용은 Angularjs에서 파일을 업로드하는 방법은 무엇입니까? Anglejs에서 파일을 업로드하는 ng-file-upload에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!