tp 多文件上传,文件及时预览
页面代码
<form class="form1" action="__URL__/upload/" method="post" enctype="multipart/form-data"> <div class="weui_uploader_input_wrp1"> <div id="localImag1"><img id="preview1" src="__PUBLIC__/image/kh/ph1.png"></div> <input class="weui_uploader_input" type="file" name="image[]" id="doc1" onchange="javascript:setImagePreview(1);" accept="image/jpg,image/jpeg,image/png,image/gif" multiple /> </div> <div class="weui_uploader_input_wrp2"> <div id="localImag2"> <img id="preview2" src="__PUBLIC__/image/kh/ph2.png"></div> <input class="weui_uploader_input" type="file" name="image[]" id="doc2" onchange="javascript:setImagePreview(2);" accept="image/jpg,image/jpeg,image/png,image/gif" multiple /> </div> <div class="login-btn"> <input class="submit1" type="submit" value="下一步"></button> </div> </form> <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview(avalue) { var docObj=document.getElementById("doc"+avalue); var imgObjPreview=document.getElementById("preview"+avalue); if(docObj.files && docObj.files[0]) { //火狐下,直接设img属性 imgObjPreview.style.display = "block"; imgObjPreview.style.width = "150px"; imgObjPreview.style.height = "180px"; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } else { //IE下,使用滤镜 docObj.select(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById("localImag"+avalue); //必须设置初始大小 localImagId.style.width = "150px"; localImagId.style.height = "180px"; //图片异常的捕捉,防止用户修改后缀来伪造图片 try{ localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch(e) { alert("您上传的图片格式不正确,请重新选择!"); return false; } imgObjPreview.style.display = "none"; document.selection.empty(); } return true; } </script>
逻辑处理
public function upload() { if (!empty($_FILES)) { //如果有文件上传 上传附件 $data= $this->_upload(); if(isset($data)){ //如果上传文件的信息不为空,我们就将这些信息保存到数据库中 $this->db_img($data,1); }else{ $this->error("插入到数据库失败"); } } }
protected function _upload() { import("@.ORG.UploadFile"); $reguid=session("reguid"); //导入上传类 $upload = new UploadFile(); //设置上传文件大小 $upload->maxSize = 3292200; //设置上传文件类型 $upload->allowExts = explode(",", "jpg,gif,png,jpeg"); //设置附件上传目录 $upload->savePath = "./Uploads/".$reguid."/"; //设置需要生成缩略图,仅对图像文件有效 $upload->thumb = true; // 设置引用图片类库包路径 $upload->imageClassPath = "@.ORG.Image"; //设置需要生成缩略图的文件后缀 $upload->thumbPrefix = "m_"; //设置缩略图最大宽度 $upload->thumbMaxWidth = "400,100"; //设置缩略图最大高度 $upload->thumbMaxHeight = "400,100"; //设置上传文件规则 $upload->saveRule = "uniqid"; //删除原图 $upload->thumbRemoveOrigin = false; if (!$upload->upload()) { //捕获上传异常 $this->error($upload->getErrorMsg()); } else { //取得成功上传的文件信息 $uploadList = $upload->getUploadFileInfo(); // import("@.ORG.Image"); // //给m_缩略图添加水印, Image::water("原文件名","水印图片地址") // Image::water($uploadList[0]["savepath"] . "m_" . $uploadList[0]["savename"], APP_PATH."Tpl/Public/Images/logo.png"); // $_POST["image"] = $uploadList[0]["savename"]; return $uploadList; } }
public function db_img($data1,$type){ $mediator=M("mediator"); $reguid=session("reguid"); $mediatordb=$mediator->where("uid=".$reguid)->find(); //保存当前数据对象 if($type==1) { $data["step"] = 2; for ($i = 0; $i < count($data1); $i++) { $i == 1 ? ($data["sfz_img_fm"] = $data1[$i]["savename"]) : ($data["sfz_img_zm"] = $data1[$i]["savename"]); $mediator->create($data, Model::MODEL_UPDATE); $re1 = $mediator->where("id=" . $mediatordb["id"])->save(); if ($i == 1) { if ($re1 !== false) { $this->redirect("mediator/reg3"); } else { echo "<script>alert("上传图片失败")</script>"; $this->redirect("mediator/reg2"); } } } }elseif($type==2){ $data["step"] = 4; for ($i = 0; $i < count($data1); $i++) { $i == 1 ? ($data["bank_img"] = $data1[$i]["savename"]) : ($data["signatureimg"] = $data1[$i]["savename"]); $mediator->create($data, Model::MODEL_UPDATE); $re1 = $mediator->where("id=" . $mediatordb["id"])->save(); if ($i == 1) { if ($re1 !== false) { $this->redirect("mediator/reg5"); } else { echo "<script>alert("上传图片失败")</script>"; $this->redirect("mediator/reg4"); } } } }elseif($type==3){ $data["step"] = 6; $data["sfz_img_sc"] = $data1[0]["savename"]; $mediator->create($data, Model::MODEL_UPDATE); $re1 = $mediator->where("id=" . $mediatordb["id"])->save(); if ($re1 !== false) { $this->redirect("mediator/reg7"); } else { echo "<script>alert("上传图片失败")</script>"; $this->redirect("mediator/reg6"); } } }
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。