thinkphp jquery implémente les effets de téléchargement d'images et de prévisualisation

Cet article présente principalement en détail la fonction de téléchargement d'images de thinkphp et l'effet d'aperçu d'image jquery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Tout d'abord, les rendus :

Ignorez d'abord le style du bouton de fichier

Cliquez pour sélectionner une image (parcourir) et sélectionnez une image au hasard

Le code js est le suivant

//上传图片立即预览
 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 = "<img id=&#39;img1&#39; width=&#39;120px&#39; height=&#39;100px&#39; src=&#39;"+path+"&#39;/>";
    //document.getElementById("img1").src = path;
   }
  }
 }

le code html, ce n'est en fait pas important

<p class="form-group has-success has-feedback">
       <label for="info_photo" class="col-sm-2 control-label">物品图片</label>
       <p class="col-sm-10">

        <span class="btn btn-success btn-file"> 选择图片 <span
         class="glyphicon glyphicon-picture" aria-hidden="true"></span>
         <input type="file" name="info_photo" value="" id="info_photo"
         onchange=&#39;PreviewImage(this)&#39; />
        </span>
       </p>

      </p>

      <p class="form-group has-success has-feedback">
       <label for="info_desc" class="col-sm-2 control-label"><span
        style="color: red;">* </span> 详细描述</label>
       <p class="col-sm-10">
        <textarea class="form-control" rows="5" id="info_desc"
         name="info_desc" placeholder="如需补充，请填写..." title="可包含中文数字和常用字符"></textarea>
        <p id="photo_info" class="photo_info"></p>
       </p>
      </p>

Le code CSS n'est pas téléchargé

Au fait, je voudrais ajouter que le code de l'image de téléchargement thinkphp a copié l'intégralité du message de publication

public function loseThing(){
   $m=M('info');
   $m->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('发布失败,请先登录');
   } 
  }

Recommandations associées :

Plug-in de téléchargement d'images basé sur ThinkPHP5.0

jQuery implémente le téléchargement d'images avec une fonction de prévisualisation locale

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!