thinkphp jquery实现图片上传和预览效果

先上效果图：

那个file按钮样式先忽略

点击选择图片（浏览），随便选一张图片

上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."),imgFile.value.length); filextension = filextension.toLowerCase(); if ((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) { alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !"); imgFile.focus(); } else { var path; if (document.all)//IE { imgFile.select(); path = document.selection.createRange().text; document.getElementById("photo_info").innerHTML = ""; document.getElementById("photo_info").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 } else//FF { path = window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上 //path = imgFile.files[0].getAsDataURL();// FF 3.0 document.getElementById("photo_info").innerHTML = "

"; //document.getElementById("img1").src = path; } } }

HTML代码，其实不重要啦

Feedback"> 图片

    <span class="btn btn-success btn-file"&gt; 选择<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a> <span
     class="glyphicon glyphicon-picture" aria-hidden="true"&gt;</span>
     <input type="file" name="info_photo" value="" id="info_photo"
     onchange='PreviewImage(this)' />
    </span>
   </div>

  </div>

  <div class="form-group has-success has-<a href="https://www.jb51.cc/tag/Feed/" target="_blank" class="keywords">Feed</a>back"&gt;
   <label for="info_desc" class="col-sm-2 control-label"&gt;<span
    style="color: red;"&gt;* </span>详细描述</label>
   <div class="col-sm-10"&gt;
    <textarea class="form-control" rows="5" id="info_desc"
     name="info_desc" placeholder="如需补充，请填写..." title="可包含<a href="https://www.jb51.cc/tag/zhongwen/" target="_blank" class="keywords">中文</a>数字和常用字符"&gt;</textarea>
    <div id="photo_info" class="photo_info"&gt;</div>
   </div>
  </div>

css代码就不上了啊顺便补充一下thinkPHP 上传图片代码，把整个发布消息都拷过了算了

create(); $upload = new \Think\Upload();// 实例化上传类 $upload->maxSize = 3145728 ;// 设置附件上传大小 $upload->exts = array('jpg','gif','png','jpeg','bmp');// 设置附件上传类型 $upload->rootPath = './Public/'; $upload->savePath = '/Uploads/'; // 设置附件上传目录 $upload->autoSub = false; // 上传文件 $info = $upload->upload(); if($info) { // 上传成功 foreach($info as $file){ $m->info_photo=$file['savename']; } } $m->create_time=date('Y-m-d H:i:s',time()); $m->uid=$_SESSION['id']; $m->username=$_SESSION['username']; /* $m->user_img=$_SESSION['filename']; */

$m->info_type="寻物启事";//信息类型为失物
$lastId=$m->add();
if($lastId){
$this->success('发布成功');
}else{
$this->error('发布失败,请先登录');
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/thinkphp/18353.html

ThinkPHP教程

上一篇：thinkPHP统计排行与分页显示功能示下一篇：thinkphp实现分页显示功能

thinkphp jquery实现图片上传和预览效果

猜你在找的ThinkPHP相关文章