저자: Bailang 출처: www.manks.top/article/async_upload_to_upyun
이 글의 저작권은 작성자에게 있으며, 재인쇄하셔도 좋습니다. 저자의 동의를 얻어야 하며 기사 페이지의 눈에 띄는 위치에 제공되어야 합니다. 원본 텍스트를 링크해 주세요. 그렇지 않으면 당사가 법적 책임을 물을 권리가 있습니다.
웹사이트의 정적 파일은 Youpaiyun에 저장됩니다. 이전에는 Youpaiyun의 FORM API
을 통해 업로드가 이루어졌습니다.
제품 관리자가 고개를 갸웃거리며 다가올 때, 이런 사용자 정보를 업로드해도 새로고침 효과가 없습니다.
그가 한동안 몰래 투덜대면 도대체 무슨 일이야? 이 친구는 이름도 멋있고, 비동기 업로드도 하고, 키도 크고, 품격도 있고, 저랑 꼭 닮았다고 들었어요.
저희 관찰에 따르면 여기에는 두 가지 핵심 사항이 있습니다.
1, 비동기 업로드 구현 방법
2, Youpaiyun에 업로드하는 방법
우선 비동기 업로드를 구현하려면 js
에서 FormData
객체를 사용해야 합니다. 이 사람은 ie6 7을 지원하지 않는다고 합니다. ie8은 잘 모르겠습니다. 내 실수에 대해서는 책임지지 않습니다.
하지만 너무 깊게 생각할 필요는 없습니다. 얼마 전 타오바오가 IE6 7을 포기할 것이라는 소식을 들었으니 너무 깊게 생각하지 마세요. ie6 7 내가 그 사람을 잡으면 그 사람이 감히 나를 지지하지 않는다는 이유로 그 사람을 개자식이라고 부를 것입니다. 여기서는 자세히 소개하지 않겠습니다. 직접 검색해 보세요.
먼저 FormData
레이어 사용법을 살펴보겠습니다
view
FormData
상상하시겠지만 그냥
<input type="file" accept="image/jpg,image/jpeg,image/png,image/gif"> <input type="hidden" name="file">
input
input
가 얼마나 화가 났는지 볼까요
JS
이 시점에서 비동기를 위한 프런트엔드 코드를 구현했습니다. Youpaiyun에 필요한
<script type="text/javascript"> function($){ //上传 $("#upload").on("change", function () { //构造FormData对象并赋值 var formData = new FormData(); formData.append("policy", "//controller层传递过来upYun的policy配置"); formData.append("signature", "//controller层传递过来upyun的signature配置"); formData.append("file", $("#upload")[0].files[0]); $.ajax({ url : "//处理上传的后端程序地址", type : "POST", data : formData, processData : false, contentType : false, beforeSend: function () { //可以做一些正在上传的效果 }, success : function(data) { //data,我们这里是异步上传到后端程序所返回的图片地址 }, error : function(responseStr) { console.log(responseStr); } }); }); }($); </script>
매개변수를 포함한 업로드는 policy
signature
을 참조하면 됩니다.
위 내용은 Youpaiyun을 포함하여 Youpaiyun에 대한 비동기 업로드 및 콘텐츠 업로드에 대한 예제 튜토리얼을 소개했습니다. PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.
https://github.com/upyun/php-sdk 进行处理