Ajax实现图片上传并预览功能

先给大家展示下效果图,大家感觉不错,请参考实现代码。

最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现,但是还是觉得自己写比较好。我们知道,图片上传需要一个input:file表单

<input type='file' name='pic'> 

当我们点击表单的时候提示选择需要上传的图片。但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的。代码如下:

function getFileUrl(sourceId) {
  var url;
  url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
  return url;
}
function preImg(sourceId, targetId) {
  var url = getFileUrl(sourceId);
  var imgPre = document.getElementById(targetId);
  imgPre.src = url;
} 

效果如下:

但是这样的话会涉及很多兼容问题。所以就想到了Ajax,在图片上传时,使用Ajax技术。将图片上传到服务器,再由服务器返回给我们图片的上传地址,然后添加到img标签中去。过程虽然麻烦了点,但是亲测不会有兼容问题。

需要发送Ajax请求的话,当然input:file表单是不能实现我们的需求的,因此,我们需要给表单关联一个单击事件去帮我们进行Ajax请求并选择图片

<form id="form1">
   <label for="exampleInputEmail1">头像</label>
   <input type="button" value="上传图片" onclick="f.click()" class="btn_mouseout"/><br>
    <p><input type="file" id="f" name="f" onchange="sc(this);" style="display:none"/></p>
 </form>
<div id="result"></div> 

当我们点击上传图片这个button按钮时触发input:file选择图片实现Ajax上传

<script>
function sc(){
  var animateimg = $("#f").val(); //获取上传的图片名 带//
  var imgarr=animateimg.split('\\'); //分割
  var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名
  var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置
  var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 获取文件后缀
  var file = $('#f').get(0).files[0]; //获取上传的文件
  var fileSize = file.size;      //获取上传的文件大小
  var maxSize = 1048576;       //最大1MB
  if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){
    parent.layer.msg('文件类型错误,请上传图片类型');
    return false;
  }else if(parseInt(fileSize) >= parseInt(maxSize)){
    parent.layer.msg('上传的文件不能超过1MB');
    return false;
  }else{
    var data = new FormData($('#form1')[0]);
    $.ajax({
      url: "{:url('User/uppic')}",
      type: 'POST',
      data: data,
      dataType: 'JSON',
      cache: false,
      processData: false,
      contentType: false
    }).done(function(ret){
      if(ret['isSuccess']){
        var result = '';
        var result1 = '';
        // $("#show").attr('value',+ ret['f'] +);
        result += '<img src="' + '__ROAD__' + ret['f'] + '" width="100">';
        result1 += '<input value="' + ret['f'] + '" name="user_headimg" style="display:none;">';
        $('#result').html(result);
        $('#show').html(result1);
        layer.msg('上传成功');
      }else{
        layer.msg('上传失败');
      }
    });
    return false;
    }
  }
</script> 

这里我们采用FormData对面进行表单提交,然后服务器端接收

public function uppic()
  {
    $file = request()->file('f');
    $info = $file->move(ROOT_PATH . 'public/uploads/avatar');
    $a=$info->getSaveName();
    $imgp= str_replace("\\","/",$a);
    $imgpath='uploads/avatar/'.$imgp;
    $banner_img= $imgpath;
    $response = array();
    if($info){
      $response['isSuccess'] = true;
      $response['f'] = $imgpath;
    }else{
      $response['isSuccess'] = false;
    }  

    echo json_encode($response);
  } 

这里会返回图片上传的url路径:$response['f] = $imgpath;现在我们要做的就是将这个url写进前台HTML部分进行一个显示

<div class="form-group">
  <!-- 将Ajax上传的图片路径添加到数据库 -->
  <div id="show"></div>
</div> 

在JS中添加

$('#show').html(result1); 

总结

以上所述是小编给大家介绍的Ajax实现图片上传并预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Ajax上传图片及上传前先预览功能实例代码

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

  • PHP+Ajax无刷新带进度条图片上传示例

    项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条.所需插件:jquery.js,jquery.form.js. 最近在做一个手机web项目,需要用到Ajax上传功图片能,项目要求PHP无刷新上传图片,并且要带进度条,下面就来讲一下我的实现方法,先看效果图 本示例需要使用的是jquery.js,jquery.form.js,demo里面包含有,你可以在文章下方进行下载. 第一步,建立前端页面index.html 此段是前端展示内容,这里需要说明的是由于input:file标签显示

  • ajax +NodeJS 实现图片上传实例

    前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note(注意) 大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片 安装multer模块: npm i -S multer code(代码) 1.app.js const express = require('express'); const multer = requi

  • 自己动手打造ajax图片上传(网上没有的)

    今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的.于是就自己动手写了一个. 方法1,仅使用jquery代码,不用第三方插件.代码如下 <p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /&g

  • ajax实现异步文件或图片上传功能

    大家好,这篇文章我要给大家分享一个网页文件上传功能的代码,希望大家可以有所参考,或者给我提些建议. 众所周知现在的各大网站基本都设有文件上传功能,用户可以把自己喜欢的图片或其他文件放在网上存起来,以便以后用的时候方便去找,可是一个网页的文件上传功能究竟该怎么去设置呢?今天我就以图片上传为例向大家展示文件上传功能的具体步骤. 其实文件上传有两种方法,一种是from表单submit提交,一种是ajax实现异步提交,可是form表单提交有个问题就是每次在上传完成时会刷新界面,不能实现异步上传,所以现在

  • AJAX实现图片预览与上传及生成缩略图的方法

    要实现功能,上传图片时可以预览,因还有别的文字,所以并不只上传图片,实现与别的文字一起保存,当然上来先上传图片,然后把路径和别的文字一起写入数据库:同时为 图片生成缩略图,现只写上传图片方法,文字在ajax里直接传参数就可以了,若要上传多图,修改一下就可以了. 借鉴了网上资料,自己写了一下,并不需要再新加页面,只在一个页面里就OK啦. JS代码: //ajax保存数据,后台方法里实现此方法 function SaveData() { filename = document.getElementB

  • React+ajax+java实现上传图片并预览功能

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f

  • Javascript异步表单提交,图片上传,兼容异步模拟ajax技术

    前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20

  • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="

  • ajax图片上传,图片异步上传,更新实例

    最近在研究ajax图片上传,图片异步上传,更新,留作参考. 直接上源码吧: js源码: /// <reference path="jquery-1.8.3.js" /> /// <reference path="ajaxForm/jquery.form.js" /> /*! * jQuery upload * 用于上传单个文件,上传成功后,返回文件路径. * 本插件依赖jQuery,jquery.form 请在使用时引入依赖的文件 * * D

随机推荐