Heim > Backend-Entwicklung > PHP-Tutorial > php+ajax无刷新上传图片实例代码,_PHP教程

php+ajax无刷新上传图片实例代码,_PHP教程

WBOY
Freigeben: 2016-07-12 09:04:34
Original
957 Leute haben es durchsucht

php+ajax无刷新上传图片实例代码,

本文分享了php结合ajax实现无刷新上传图片的实例代码,分享给大家,希望大家可以和小编一起学习学习,共同进步。

1.引入文件

<!--图片上传begin-->
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript" src="/js/uploadImg.js"></script>
<link href="/css/uploadImg.css" rel="stylesheet" type="text/css" />
<!--图片上传end-->
Nach dem Login kopieren

2.html部分

<div class="upimg">
       <input name="icon" type="text" class="imgsrc" value="<!--{$contents.icon}-->" />
       <div class="showimg">
        <!--{if $contents.icon}-->
        <img  src="<!--{$contents.icon}-- alt="php+ajax无刷新上传图片实例代码,_PHP教程" >" height="120px">
        <!--{/if}-->
       </div>          
       <div class="btn" style="height:20px;">
          <span>添加图片</span>
          <input class="fileupload" type="file" name="pic[]">
       </div>
       </div> 
Nach dem Login kopieren

3.给fileupload加上表单

/*图片上传*/
  $(".fileupload").wrap("<form action='/bookstore/book/uploadpic' method='post' enctype='multipart/form-data'></form>"); //函数处理
Nach dem Login kopieren

4.ajax文件上传

jQuery(function ($) { 
  $(".fileupload").change(function(){ //选择文件 
    if ('' === $(this).val()) return;
    var upimg = $(this).parent().parent().parent();
    var showimg = upimg.find('.showimg');
    var btn = upimg.find('.btn span');
    var imgsrc = upimg.find('.imgsrc');
    $(this).parent().ajaxSubmit({ 
      //dataType: 'json', //数据格式为json 
      beforeSend: function() { //开始上传 
        showimg.empty(); //清空显示的图片 
        imgsrc.val("");
        btn.html("上传中..."); //上传按钮显示上传中 
      }, 
      uploadProgress: function(event, position, total, percentComplete) { 
      }, 
      success: function(data) { //成功 
        //获得后台返回的json数据,显示文件名,大小,以及删除按钮 
        var img = data;
        //显示上传后的图片 
        imgsrc.val("");
        imgsrc.val(img);
        showimg.html("<img     style="max-width:90%"  style="max-width:90%" src='"+img+"' alt="php+ajax无刷新上传图片实例代码,_PHP教程" >"); 
        btn.html("上传成功"); //上传按钮还原 
      }, 
      error:function(xhr){ //上传失败 
        btn.html("上传失败"); 
      } 
    }); 
  }); 
}); 
Nach dem Login kopieren

5.后台进行处理

public function uploadpicAction(){ //图片上传和显示
    $data = "";
    $src = $this->uploadFiles2($imgpath = "/upload/book" ,$filesname = "pic");      
    isset($src[0]['src']) && $src[0]['src'] &#63; $data = $this->concaturl($src[0]['src']) : null;
    echo $data; 
  }
Nach dem Login kopieren

6.将返回的数据交给前端,进行一些处理。

进而提交到后台数据库。

希望本文所述对大家学习php程序设计有所帮助。

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/1072545.htmlTechArticlephp+ajax无刷新上传图片实例代码, 本文分享了php结合ajax实现无刷新上传图片的实例代码,分享给大家,希望大家可以和小编一起学习学习,...
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage