Android中使用GridView实现仿微信图片上传功能(附源代码)

由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传、拍照、本地选择、相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助。

直接上图,下面的图片就是点击“加号”后弹出的对话框,通过对话框可以根据自己需求进行相片选择。

项目结构:

下面直接上代码。

整体的布局文件activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/index"
  android:orientation="vertical" >
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:background="#24cf5f"
    android:orientation="horizontal" >
    <ImageView
      android:id="@+id/back"
      android:layout_width="match_parent"
      android:layout_height="20dp"
      android:layout_gravity="center"
      android:layout_weight="5"
      android:src="@drawable/back" />
    <TextView
      android:layout_width="fill_parent"
      android:layout_height="44dp"
      android:layout_weight="1"
      android:gravity="center"
      android:paddingRight="40dp"
      android:text="图片上传"
      android:textColor="#FFFFFF"
      android:textSize="30px" />
  </LinearLayout>
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />
  <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1" >
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical" >
      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000" />
      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:orientation="vertical" >
        <TextView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:text="请选择上传的图片" />
        <TextView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:text="(友情提示:图片最多可添加9张,点击可删除选择的图片)"
          android:textSize="18px" />
      </LinearLayout>
      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000" />
      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >
        <com.yihang.MyGridView.MyGridView
          android:id="@+id/gridView"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_margin="5dp"
          android:layout_weight="111"
          android:columnWidth="90dp"
          android:gravity="center"
          android:horizontalSpacing="5dp"
          android:numColumns="4"
          android:stretchMode="columnWidth"
          android:verticalSpacing="5dp" />
      </LinearLayout>
    </LinearLayout>
  </ScrollView>
  <Button
    android:id="@+id/bt_submit"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    android:layout_weight="5.2"
    android:background="#24cf5f"
    android:text="上传"
    android:textColor="#FFFFFF"
    android:textSize="16sp" />
</LinearLayout>

activity:MainActivity

package com.yihang.activity;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.provider.MediaStore;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.SimpleAdapter.ViewBinder;
import android.widget.Toast;
import com.yihang.dialog.MyDialog;
import com.yihang.dialog.MyDialog.OnButtonClickListener;
import com.yihang.photodemo.R;
public class MainActivity extends Activity implements
OnButtonClickListener, OnItemClickListener{
  private MyDialog dialog;// 图片选择对话框
  public static final int NONE = 0;
  public static final int PHOTOHRAPH = 1;// 拍照
  public static final int PHOTOZOOM = 2; // 缩放
  public static final int PHOTORESOULT = 3;// 结果
  public static final String IMAGE_UNSPECIFIED = "image/*";
  private GridView gridView; // 网格显示缩略图
  private final int IMAGE_OPEN = 4; // 打开图片标记
  private String pathImage; // 选择图片路径
  private Bitmap bmp; // 导入临时图片
  private ArrayList<HashMap<String, Object>> imageItem;
  private SimpleAdapter simpleAdapter; // 适配器
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    /*
     * 防止键盘挡住输入框 不希望遮挡设置activity属性 android:windowSoftInputMode="adjustPan"
     * 希望动态调整高度 android:windowSoftInputMode="adjustResize"
     */
    getWindow().setSoftInputMode(
        WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
    // 锁定屏幕
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    setContentView(R.layout.activity_main);
    init();
    initData();
  }
  private void init() {
    gridView = (GridView) findViewById(R.id.gridView);
    gridView.setOnItemClickListener(this);
    dialog = new MyDialog(this);
    dialog.setOnButtonClickListener(this);
    // activity中调用其他activity中组件的方法
    LayoutInflater layout = this.getLayoutInflater();
    View view = layout.inflate(R.layout.layout_select_photo, null);
  }
  private void initData() {
    /*
     * 载入默认图片添加图片加号
     */
    bmp = BitmapFactory.decodeResource(getResources(),
        R.drawable.gridview_addpic); // 加号
    imageItem = new ArrayList<HashMap<String, Object>>();
    HashMap<String, Object> map = new HashMap<String, Object>();
    map.put("itemImage", bmp);
    imageItem.add(map);
    simpleAdapter = new SimpleAdapter(this, imageItem,
        R.layout.griditem_addpic, new String[] { "itemImage" },
        new int[] { R.id.imageView1 });
    simpleAdapter.setViewBinder(new ViewBinder() {
      @Override
      public boolean setViewValue(View view, Object data,
          String textRepresentation) {
        // TODO Auto-generated method stub
        if (view instanceof ImageView && data instanceof Bitmap) {
          ImageView i = (ImageView) view;
          i.setImageBitmap((Bitmap) data);
          return true;
        }
        return false;
      }
    });
    gridView.setAdapter(simpleAdapter);
  }
  @Override
  public void camera() {
    // TODO Auto-generated method stub
    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(new File(
        Environment.getExternalStorageDirectory(), "temp.jpg")));
    startActivityForResult(intent, PHOTOHRAPH);
  }
  @Override
  public void gallery() {
    // TODO Auto-generated method stub
    Intent intent = new Intent(Intent.ACTION_PICK,
        android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    startActivityForResult(intent, IMAGE_OPEN);
  }
  @Override
  public void cancel() {
    // TODO Auto-generated method stub
    dialog.cancel();
  }
  @Override
  protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    // TODO Auto-generated method stub
    super.onActivityResult(requestCode, resultCode, data);
    if (resultCode == NONE)
      return;
    // 拍照
    if (requestCode == PHOTOHRAPH) {
      // 设置文件保存路径这里放在跟目录下
      File picture = new File(Environment.getExternalStorageDirectory()
          + "/temp.jpg");
      startPhotoZoom(Uri.fromFile(picture));
    }
    if (data == null)
      return;
    // 处理结果
    if (requestCode == PHOTORESOULT) {
      Bundle extras = data.getExtras();
      if (extras != null) {
        Bitmap photo = extras.getParcelable("data");
        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        photo.compress(Bitmap.CompressFormat.JPEG, 75, stream);// (0-100)压缩文件
        // 将图片放入gridview中
        HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("itemImage", photo);
        imageItem.add(map);
        simpleAdapter = new SimpleAdapter(this, imageItem,
            R.layout.griditem_addpic, new String[] { "itemImage" },
            new int[] { R.id.imageView1 });
        simpleAdapter.setViewBinder(new ViewBinder() {
          @Override
          public boolean setViewValue(View view, Object data,
              String textRepresentation) {
            // TODO Auto-generated method stub
            if (view instanceof ImageView && data instanceof Bitmap) {
              ImageView i = (ImageView) view;
              i.setImageBitmap((Bitmap) data);
              return true;
            }
            return false;
          }
        });
        gridView.setAdapter(simpleAdapter);
        simpleAdapter.notifyDataSetChanged();
        dialog.dismiss();
      }
    }
    // 打开图片
    if (resultCode == RESULT_OK && requestCode == IMAGE_OPEN) {
      startPhotoZoom(data.getData());
    }
    super.onActivityResult(requestCode, resultCode, data);
  }
  @Override
  protected void onResume() {
    // TODO Auto-generated method stub
    super.onResume();
    if (!TextUtils.isEmpty(pathImage)) {
      Bitmap addbmp = BitmapFactory.decodeFile(pathImage);
      HashMap<String, Object> map = new HashMap<String, Object>();
      map.put("itemImage", addbmp);
      imageItem.add(map);
      simpleAdapter = new SimpleAdapter(this, imageItem,
          R.layout.griditem_addpic, new String[] { "itemImage" },
          new int[] { R.id.imageView1 });
      simpleAdapter.setViewBinder(new ViewBinder() {
        @Override
        public boolean setViewValue(View view, Object data,
            String textRepresentation) {
          // TODO Auto-generated method stub
          if (view instanceof ImageView && data instanceof Bitmap) {
            ImageView i = (ImageView) view;
            i.setImageBitmap((Bitmap) data);
            return true;
          }
          return false;
        }
      });
      gridView.setAdapter(simpleAdapter);
      simpleAdapter.notifyDataSetChanged();
      // 刷新后释放防止手机休眠后自动添加
      pathImage = null;
      dialog.dismiss();
    }
  }
  @Override
  public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
    // TODO Auto-generated method stub
    if (imageItem.size() == 10) { // 第一张为默认图片
      Toast.makeText(MainActivity.this, "图片数9张已满",
          Toast.LENGTH_SHORT).show();
    } else if (position == 0) { // 点击图片位置为+ 0对应0张图片
      // 选择图片
      dialog.show();
      // 通过onResume()刷新数据
    } else {
      dialog(position);
    }
  }
  /*
   * Dialog对话框提示用户删除操作 position为删除图片位置
   */
  protected void dialog(final int position) {
    AlertDialog.Builder builder = new Builder(MainActivity.this);
    builder.setMessage("确认移除已添加图片吗?");
    builder.setTitle("提示");
    builder.setPositiveButton("确认", new DialogInterface.OnClickListener() {
      @Override
      public void onClick(DialogInterface dialog, int which) {
        dialog.dismiss();
        imageItem.remove(position);
        simpleAdapter.notifyDataSetChanged();
      }
    });
    builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
      @Override
      public void onClick(DialogInterface dialog, int which) {
        dialog.dismiss();
      }
    });
    builder.create().show();
  }
  public void startPhotoZoom(Uri uri) {
    Intent intent = new Intent("com.android.camera.action.CROP");
    intent.setDataAndType(uri, IMAGE_UNSPECIFIED);
    intent.putExtra("crop", "true");
    // aspectX aspectY 是宽高的比例
    intent.putExtra("aspectX", 1);
    intent.putExtra("aspectY", 1);
    // outputX outputY 是裁剪图片宽高
    intent.putExtra("outputX", 64);
    intent.putExtra("outputY", 64);
    intent.putExtra("return-data", true);
    startActivityForResult(intent, PHOTORESOULT);
  }
}

弹出的对话框(仿照微信来完成):MyDialog

package com.yihang.dialog;
import com.yihang.photodemo.R;
import android.app.Dialog;
import android.content.Context;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.View.OnClickListener;
/**
 * 对话框实现类
 * @author admin
 *
 */
public class MyDialog extends Dialog implements OnClickListener {
  public MyDialog(Context context) {
    super(context,R.style.myDialog);
    //初始化布局
        setContentView(R.layout.layout_select_photo);
        Window dialogWindow = getWindow();
        dialogWindow.setLayout(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        dialogWindow.setGravity(Gravity.BOTTOM);
        setCanceledOnTouchOutside(true);
        findViewById(R.id.btn_camera).setOnClickListener(this);
        findViewById(R.id.btn_gallery).setOnClickListener(this);
        findViewById(R.id.btn_cancel).setOnClickListener(this);
  }
  @Override
  public void onClick(View v) {
    // TODO Auto-generated method stub
    switch (v.getId()) {
    case R.id.btn_camera:
      onButtonClickListener.camera();
      break;
    case R.id.btn_gallery:
      onButtonClickListener.gallery();
      break;
    case R.id.btn_cancel:
      onButtonClickListener.cancel();
      break;
    default:
      break;
    }
  }
  /**
   * 按钮的监听器
   * @author Orathee
   * @date 2014年3月20日 下午4:28:39
   */
  public interface OnButtonClickListener{
    void camera();
    void gallery();
    void cancel();
  }
  private OnButtonClickListener onButtonClickListener;
  public OnButtonClickListener getOnButtonClickListener() {
    return onButtonClickListener;
  }
  public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener) {
    this.onButtonClickListener = onButtonClickListener;
  }
}

对话框的布局文件:layout_select_photo.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:gravity="bottom">
  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/btn_style_alert_dialog_background"
    android:padding="20dp">
      <TextView
        android:id="@+id/btn_camera"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:background="@drawable/btn_style_alert_dialog_button"
        android:textColor="#0f0f0f"
        android:text="拍照"
        android:shadowDx="0.5"
        android:shadowDy="0.5"
        android:shadowRadius="0.5"
        android:shadowColor="#ffffff"
        android:layout_marginBottom="10dp"
        android:padding="10dp"
        android:gravity="center"/>
      <TextView
        android:id="@+id/btn_gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:background="@drawable/btn_style_alert_dialog_button"
        android:textColor="#0f0f0f"
        android:text="从相册中选择"
        android:shadowDx="0.5"
        android:shadowDy="0.5"
        android:shadowRadius="0.5"
        android:shadowColor="#ffffff"
        android:layout_marginBottom="10dp"
        android:padding="10dp"
        android:gravity="center"/>
      <TextView
        android:id="@+id/btn_cancel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_style_alert_dialog_cancel"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:text="取消"
        android:shadowDx="0.5"
        android:shadowDy="0.5"
        android:shadowRadius="0.5"
        android:shadowColor="#000000"
        android:layout_marginTop="10dp"
        android:padding="10dp"
        android:gravity="center"/>
  </LinearLayout>
</LinearLayout>

自定义的GridView:

package com.yihang.MyGridView;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.GridView;
public class MyGridView extends GridView {
  public MyGridView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
  }
  public MyGridView(Context context) {
    super(context);
  }
  public MyGridView(Context context, AttributeSet attrs, int defStyle) {
    super(context);
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // TODO Auto-generated method stub
    int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
        MeasureSpec.AT_MOST);
    super.onMeasure(widthMeasureSpec, expandSpec);
  }
}

源码下载:http://xiazai.jb51.net/201707/yuanma/photoDemo.rar

总结

以上所述是小编给大家介绍的Android中使用GridView实现仿微信图片上传功能(附源代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-08-21

android实现图片上传功能(springMvc)

本文实例为大家分享了Android图片上传的具体代码,供大家参考,具体内容如下 Android端: String fileName = tvFilename.getText().toString(); RequestBody description = RequestBody.create( okhttp3.MultipartBody.FORM, fileName); File fileImage = new File(saveFileName); RequestBody requestBody

Android中使用七牛云存储进行图片上传下载的实例代码

Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储原理,上面这幅图片是官方给出的原理图,表述当然比较清晰了. 可以看出,要进行图片上传的话可以分为五大步: 1. 客户端用户登录到APP的账号系统里面: 2. 客户端上传文件之前,需要向业务服务器申请七牛的上传凭证,这个凭证由业务服务器使用七牛提供的服务端SDK生成: 3. 客户端使用七牛提供的客户端

Android webview打开本地图片上传实现代码

Webview打开本地图片选择器十分之麻烦,其在安卓系统3x 4x 5x上的行为都不同,处理也不同,所以之前差点崩溃.经过测试和完善,最终其在各个版本上都能完美工作. 直接上代码 package com.testandroid.webview; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.support.v7.app.AlertDialog; imp

Android OkHttp 结合php 多图片上传实例

今天写项目的时候需要多图片上传,就用okhttp简单写一个例子. public class MainActivity extends AppCompatActivity { private OkHttpClient client; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_ma

Android实现图片上传功能

最近在开发中,涉及到用户的意见反馈功能这一方面的开发,需要用户输入的文字或者提交的图片,效果大概类似于微信朋友圈那样的图片选择器,一开始自己找了个用universal-image-loader框架写的,很容实现,但是容易出现内存溢出,并且不好解决,是在没办法,就自己看了一些资料,准备自己写:在这里说下本人实现的思路,进入页面也就是显示选择图片的页面用GridView来实现,点击添加图标的时候,用Dialog实现,给Dialog添加相应的动画就可以了,进入图片展示页面还是用GridView来实现,

android文件上传示例分享(android图片上传)

主要思路是调用系统文件管理器或者其他媒体采集资源来获取要上传的文件,然后将文件的上传进度实时展示到进度条中. 主Activity 复制代码 代码如下: package com.guotop.elearn.activity.app.yunpan.activity; import java.io.File;import java.io.FileNotFoundException;import java.io.IOException; import android.app.Activity;impor

Android图片上传实现预览效果

首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简单了网上也有很多例子,调用照相机,返回uri,获取图片 3.从相册中选择图片  3.1 获取手机中的所有图片  3.2 将图片存到自定义图片数组中显示  3.3 自定义ViewPager浏览图片 主要的逻辑大体是这样,下面具体看一下实现: 一.首先看一下界面: <com.view.NoScrollG

jQuery+HTML5实现图片上传前预览效果

本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

原生js FileReader对象实现图片上传本地预览效果

本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

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

先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte

Asp.net图片上传实现预览效果的简单代码

在页面上放入一个上传控件和一个图片控件. 复制代码 代码如下: <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>        <asp:Image ID="Image1" runat="server"  /> 在上传控件中写onpropertychange=&q

vue.js 图片上传并预览及图片更换功能的实现代码

这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

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

本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下 思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上.或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合. (2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮

微信小程序实现图片上传放大预览删除代码

本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 效果: image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { var that = this; var imgs = this.data.imgs; if (imgs.length >= 9) { this.setData({ lenMore: 1 }); setTimeout(function () {

vue+node实现图片上传及预览的示例方法

本文介绍了vue+node实现图片上传及预览的示例方法,分享给大家,具体如下: 先上效果图 上代码 html部分主要是借助了weui的样式 <template> <div> <myheader :title="'发布动态'"> <i class="iconfont icon-fanhui1 left" slot="left" @click="goback"></i>

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

先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 <input type='file' name='pic'> 当我们点击表单的时候提示选择需要上传的图片.但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的.代码如下: function getFileUrl(source