首页 > 代码库 > 上传文件点击后显示图片
上传文件点击后显示图片
HTML代码
<include file="./Application/Home/View/default/Public/homeheader.html" /><html><body><!--<form action="{:U(‘home/statistics/uploadinformation‘)}" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="file" name="file" id="file"/> <br /> <input type="submit" name="submit" value="http://www.mamicode.com/上传" /></form>!--><form action="{:U(‘home/setting/upload‘)}" method="post" enctype="multipart/form-data"> <div style="width: 100%;height: 100%;"> <div><strong>代理信息上传：</strong></div> <div class="form-group"> <a class="button input-file" style="text-align: center;vertical-align: middle;" href="javascript:void(0);">上传合同文件<input size="80" type="file" name="file1" id="file1" onchange="check1()" /></a><!--//显示合同!--> <a class="button input-file" style="text-align: center;vertical-align: middle;" href="javascript:void(0);">上传证件图片<input size="80" type="file" name="file2" id="file2" onchange="check2()" /></a><!--//显示证件!--> <button class="button bg-main" type="submit" name="submit" style="text-align: center;vertical-align: middle;" >确定上传</button> </div> <div><p id="f1name"></p></div> <div><p id="f2name"></p></div> <br> <a id="changemouse1" class="dialogs" data-toggle="click" data-target="#mydialog1" data-width="40%" onm ouseover="changemouse()" onm ouseout="defaultmouse()">查看合同</a><br> <a id="changemouse2" class="dialogs" data-toggle="click" data-target="#mydialog2" data-width="40%" onm ouseover="changemouse()" onm ouseout="defaultmouse()">查看证件</a> </div></form><div id="mydialog1"><!--点击时弹出窗口，显示合同图片!--> <div class="dialog"> <div class="dialog-head"> <span class="close rotate-hover"></span><strong>查看合同</strong> </div> <div style="text-align: center;vertical-align: middle" class="dialog-body"><img style="height:70%" width="100%" src="http://www.mamicode.com/{$addr1}"></div> <div class="dialog-foot"> <button class="button bg-green dialog-close">确认</button> </div> </div></div><div id="mydialog2"><!--点击时弹出窗口，显示合证件图片!--> <div class="dialog"> <div class="dialog-head"> <span class="close rotate-hover"></span><strong>查看证件</strong> </div> <div style="text-align: center;vertical-align: middle" class="dialog-body"><img style="height:70%" width="100%" src="http://www.mamicode.com/{$addr2}"></div> <div class="dialog-foot"> <button class="button bg-green dialog-close">确认</button> </div> </div></div><script> function changemouse() //鼠标移过去变成手形 { var obj1 = document.getElementById("changemouse1"); var obj2 = document.getElementById("changemouse2"); obj1.style.cursor = ‘pointer‘; obj2.style.cursor = ‘pointer‘; }</script><script> function defaultmouse()//鼠标移回，回复默认 { var obj1 = document.getElementById("changemouse1"); var obj2 = document.getElementById("changemouse2"); obj1.style.cursor = ‘default‘; obj2.style.cursor = ‘default‘; }</script><!--<script> function display() { var obj = document.getElementById("demo") { obj.style.display=""; } }</script>!--><script> function check1()//检查图片格式 { var filepath=file1.value ; filepath=filepath.substring(filepath.lastIndexOf(‘.‘)+1,filepath.length); if(filepath != ‘jpg‘ && filepath != ‘gif‘&& filepath != ‘png‘&& filepath != ‘jpeg‘) alert("只能上传JPG,GIF,PNG或者JPEG格式的图片"); else document.getElementById("f1name").innerText=file1.value; }</script><script> function check2() { var filepath=file2.value ; filepath=filepath.substring(filepath.lastIndexOf(‘.‘)+1,filepath.length); if(filepath != ‘jpg‘ && filepath != ‘gif‘&& filepath != ‘png‘&& filepath != ‘jpeg‘) alert("只能上传JPG,GIF,PNG或者JPEG格式的图片"); else document.getElementById("f2name").innerText=file2.value; }</script></body></html>
PHP代码
public function upload(){ if (isset($_POST[‘submit‘])) { import(‘Think.Verify.Upload‘); // $imagea = new Image(); $picture = new Upload() ; // 实例化上传类 $picture->maxSize = 3145728;// 设置附件上传大小 $picture->exts = array(‘jpg‘, ‘gif‘, ‘png‘, ‘jpeg‘);// 设置附件上传类型 $picture->rootPath = ‘./Uploads/‘;// 设置附件上传根目录 $picture->savepath = ‘‘; // 设置附件上传（子）目录 $info = $picture->upload();// 上传文件 if(!($info[‘file1‘]&&$info[‘file2‘])) { echo "<script>alert(‘请上传文件‘)</script>"; } // $fr = ‘./Uploads/‘; //错误http://localhost/use/index.php/home/user/Uploads/2016-11-14/5829803394673.jpg // $fr = ‘Uploads/‘; //错误http://localhost/use/index.php/home/user/Uploads/2016-11-14/582980519743a.jpg // $fr = ‘/Uploads/‘; //错误http://localhost/Uploads/2016-11-14/5829807535c04.jpg $fr = ‘/user/Uploads/‘;//正确 http://localhost/user/Uploads/2016-11-14/582963ff2640f.jpg // $addr1 = $fr . $info[‘file1‘][‘savepath‘] . $info[‘file1‘][‘savename‘]; // $addr2 = $fr . $info[‘file2‘][‘savepath‘] . $info[‘file2‘][‘savename‘]; $user = M(‘user_admin‘);// 实例化User对象 // 更改用户的certificate_address和contract_address的值 $upload_role_id_address = array(‘certificate_address‘ => $fr.$info[‘file2‘][‘savepath‘].$info[‘file2‘][‘savename‘], ‘contract_address‘ => $fr.$info[‘file1‘][‘savepath‘].$info[‘file1‘][‘savename‘]); $name = $_SESSION[‘adminid‘];//获取SESSION的账户名 $_SESSION[‘adminid‘],$_SESSION[‘pwd‘],$_SESSION[‘loginkey‘], $where[‘admin‘] = $name;//判断条件实例化 $user->where($where)->setField($upload_role_id_address); // $addr1 = $upload_role_id_address[‘contract_address‘]; // $addr2 = $upload_role_id_address[‘certificate_address‘]; // $this->assign(‘addr1‘,$addr1); // $this->assign(‘addr2‘,$addr2); //echo "<img src=http://www.mamicode.com/‘$addr1‘>";die(); $image1 = new \Think\Image(); $image2 = new \Think\Image(); $image1->open(‘./Uploads/‘.$info[‘file1‘][‘savepath‘].$info[‘file1‘][‘savename‘]); $image2->open(‘./Uploads/‘.$info[‘file2‘][‘savepath‘].$info[‘file2‘][‘savename‘]); $image1->thumb(800, 600,\Think\Image::IMAGE_THUMB_FIXED)->save(‘./Uploads/contract.jpg‘);//固定缩略图 $image2->thumb(800, 600,\Think\Image::IMAGE_THUMB_FIXED)->save(‘./Uploads/certificate.jpg‘);//固定缩略图 // $image1->thumb(150, 150)->save(‘./Uploads/contract.jpg‘); //按比例缩放 // $image2->thumb(150, 150)->save(‘./Uploads/certificate.jpg‘); echo "<script>alert(‘信息上传成功‘)</script>"; $addr1= $fr.‘contract.jpg‘; $addr2= $fr.‘certificate.jpg‘; /* echo " <div class=\"form-group\" style=\"float: right\">//文件预览功能 <div><strong>文件预览：</strong></div> <table> <tr> <td><img src=http://www.mamicode.com/‘$addr1‘>";//显示合同 */ //echo "<img src=http://www.mamicode.com/‘$addr2‘>";//显示证件 $this->assign(‘addr1‘,$addr1); $this->assign(‘addr2‘,$addr2); } $this->display();} //修改另外在当前文件夹建立个Upload文件夹，不然没法上传图片。
http://blog.csdn.net/s371795639/article/details/53410697
上传文件点击后显示图片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。