나는 단지 다른 사람들의 단편화된 통합을 참조하는 코드 포터일 뿐입니다. Eagle of East Yunnan이 통합한 코드
html 부분
은 jq가
js (function( $ ){ // 当domReady的时候开始初始化 $(function() { var $wrap = $('.uploader-list-container'), // 图片容器 $queue = $( ' 控制器 代码
업로드 버튼을 클릭하면 값을 양식에 전달할 수 있도록 주로 숨겨진 필드로 만들어집니다. , webupload 메소드를 입력하고 경로를 구성하십시오. 스토리지 필터링
가장 중요한 것은 ajaxReturn을 사용하여 json 데이터를 반환하고 이를 js로 전송하는 것입니다
//商品图片上传 public function webUpload(){ $config = array( 'mimes' => array(), //允许上传的文件MiMe类型 'maxSize' => 0, //上传的文件大小限制 (0-不做限制) 'exts' => array('jpg', 'gif', 'png', 'jpeg'), //允许上传的文件后缀 'autoSub' => true, //自动子目录保存文件 'subName' => array('date', 'Y-m-d'), //子目录创建方式,[0]-函数名,[1]-参数,多个参数使用数组 'rootPath' => 'Upload/', //保存根路径 'savePath' => 'Goods/',//保存路径 ); $upload = new \Think\Upload($config);// 实例化上传类 $info = $upload->upload(); if(!$info) { $this->error($upload->getError());// 上传错误提示错误信息 }else{// 上传成功 foreach ($info as $va){ $suoluetu.="./Upload/".$va['savepath'].$va['savename']."||"; $this->ajaxReturn($suoluetu); } } } js 接收
uploadSuccess 메소드를 사용하여 수신합니다. 반환 정보
응답을 사용하여 이미지 수신 주소 가져오기
jqearch 사용 메서드는 이미지 주소를 반복합니다.
arr 배열을 정의하고 메서드 외부에서 전역 배열을 선언합니다.
.push() 사용 순회된 요소를 추가하려면
마지막으로 html 인터페이스의 숨겨진 필드에 arr을 추가하세요
//ajax 成功返回地址 var arr = []; //定义全局数组 uploader.on('uploadSuccess',function(file,response){ var imgurl = response; //上传图片的路径 $(".imgfirst").each(function(){ //使用foreach 循环 地址 arr.push(imgurl); //地址追加进数组 }); $(".imgfirst").val(arr); //将地址写入到form表单 });
이렇게 하면 기본적으로 다중 이미지 업로드가 완료됩니다[/code]
tp.zip ( 5.87MB 다운로드: 16회)