Android图片上传实现预览效果

首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求、逻辑清除之后,再上手写代码,思路会很清晰。

1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择)

2.拍照上传很简单了网上也有很多例子,调用照相机,返回uri,获取图片

3.从相册中选择图片

3.1 获取手机中的所有图片  3.2 将图片存到自定义图片数组中显示  3.3 自定义ViewPager浏览图片

主要的逻辑大体是这样,下面具体看一下实现:

一、首先看一下界面:

<com.view.NoScrollGridView android:id="@+id/noScrollgridview" android:layout_marginLeft="@dimen/smaller_space" android:layout_marginRight="@dimen/smaller_space" android:layout_width="match_parent" android:layout_height="wrap_content" android:horizontalSpacing="3dp" android:listSelector="@color/transparent" android:numColumns="3" android:scrollbars="none" android:layout_gravity="center" android:layout_marginTop="@dimen/smaller_space" android:verticalSpacing="5dp" />

是一个 NoScrollGridView,项目需要,所以用了不滚动的GridView,大家用GridView也是一样的。

noScrollgridview = (GridView) findViewById(R.id.noScrollgridview); noScrollgridview.setSelector(new ColorDrawable(Color.TRANSPARENT)); /*新建传值给adapter*/ if (file == null) { picAdapter = new PictureAdapter(this, 0, null); } else { //添加失败的图片到数组中 for (int i=0;i<file.getMulFailFilePaths().length;i++){ ImageItem imageItem = new ImageItem(); imageItem.setImagePath(file.getMulFailFilePaths()[i].trim()); Bimp.tempSelectBitmap.add(imageItem); } /*上传失败传值给adapter*/ picAdapter = new PictureAdapter(this, 2, file); }

这个是初始化图片数组,适配器(新建、上传失败、上传成功的图片我用的都是一个adapter)

ImageItem是图片的模型,下面有它的属性

//从图库选择的图片model public class ImageItem extends File implements Serializable { @Id public String imageId; //图片id public String thumbnailPath; public String imagePath; //图片路径 private Bitmap bitmap; public boolean isSelected = false; public String getImageId() { return imageId; } public void setImageId(String imageId) { this.imageId = imageId; } public String getThumbnailPath() { return thumbnailPath; } public void setThumbnailPath(String thumbnailPath) { this.thumbnailPath = thumbnailPath; } public String getImagePath() { return imagePath; } public void setImagePath(String imagePath) { this.imagePath = imagePath; } public boolean isSelected() { return isSelected; } public void setSelected(boolean isSelected) { this.isSelected = isSelected; } [java] view plain copy print? /*根据图片路径获取图片的bitmap*/ public Bitmap getBitmap() { if(bitmap == null){ try { bitmap = Bimp.revitionImageSize(imagePath); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } return bitmap; } public void setBitmap(Bitmap bitmap) { this.bitmap = bitmap; }

接下来是适配器:

由于涉及到添加图片,adapter中添加一个flag用来显示新建的图片,将选择的图片添加到公有的图片数组中,初始化的时候加载图片数组显示。(大家在看的时候可以忽略掉我的flag)

@SuppressLint("HandlerLeak") public class PictureAdapter extends BaseAdapter { private LayoutInflater inflater; private int selectedPosition = -1; private boolean shape; private int flag = 0;//0 默认新建 1上传成功 2上传失败 private AppItem_file file; public boolean isShape() { return shape; } private Activity context; public void setShape(boolean shape) { this.shape = shape; } public PictureAdapter(Activity context,int flag,AppItem_file file) { this.context = context; inflater = LayoutInflater.from(context); this.flag = flag; this.file = file; } // public void update() { // loading(); // } public int getCount() { if (flag==0){ //新建图片 if (Bimp.tempSelectBitmap.size() == 6) { return 6; } return (Bimp.tempSelectBitmap.size() + 1); } else if (flag==1){ //上传成功 return file.getFileList().size(); } else { //上传失败 return file.getMulFailFilePaths().length; } } public Object getItem(int arg0) { if (flag==1){ return file.getFileList().get(arg0); }else { return file.getMulFailFilePaths()[arg0]; } } public long getItemId(int arg0) { return arg0; } public void setSelectedPosition(int position) { selectedPosition = position; } public int getSelectedPosition() { return selectedPosition; } public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder = null; if (convertView == null) { //根据图片的数量加载不同布局 if (getCount()==1&&flag!=0){ convertView = inflater.inflate(R.layout.item_published_singal_item, parent, false); } else { convertView = inflater.inflate(R.layout.item_published_grida, parent, false); } holder = new ViewHolder(); holder.image = (ImageView) convertView .findViewById(R.id.item_grida_image); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } /** * 根据初始化adapter传过来的flag值,去不同的地方找图片 * flag=0,去Bimp的图片数组中找 * flag=1,证明上传成功的,去下载好的getFileList中找 * flag=2,为上传失败的,图片保存在FailFile中的List<ImageItem>中 * 优化图片显示 */ if (flag==0){ //新建图片 if (position == Bimp.tempSelectBitmap.size()) { holder.image.setImageBitmap(BitmapFactory.decodeResource( convertView.getResources(), R.drawable.icon_add_pic_unfocused)); if (position == 6) { if (flag==0){ holder.image.setVisibility(View.GONE); } } } else { holder.image.setImageBitmap(Bimp.tempSelectBitmap.get(position).getBitmap()); } } else if (flag==1){ //上传成功 // List<Integer> ids = new ArrayList<Integer>(); // for (int i=0;i<file.getFileList().size();i++){ // ids.add(file.getFileList().get(i).getS_id()); // } int id=file.getFileList().get(position).getS_id(); try { // File file= NeedApplication.db.findById(File.class,id); String fileBigImgUri =NeedApplication.db.findById(File.class,id).getFileUriBig(); if (fileBigImgUri!=null&&!"null".equals(fileBigImgUri)) ImageLoader.getInstance().displayImage((fileBigImgUri).trim(),holder.image); } catch (DbException e) { e.printStackTrace(); } } else { //上传失败 String url = "file://"+file.getMulFailFilePaths()[position].trim(); ImageLoader.getInstance().displayImage(url, holder.image); } return convertView; } public class ViewHolder { public ImageView image; } }

下面是自定义相册界面,用来选择图片的

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#E1E0DE" > <RelativeLayout android:id="@+id/headview" android:layout_width="fill_parent" android:layout_height="45dp" android:background="@drawable/plugin_camera_title_bar" android:gravity="center_vertical" android:layout_marginBottom="3dp" > <Button android:layout_width="60dp" android:layout_height="wrap_content" android:textSize="14sp" android:textColor="#fff" android:id="@+id/back" android:text="相册" android:background="@drawable/plugin_camera_title_btn_back" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:layout_centerVertical="true" /> <Button android:layout_width="67dp" android:layout_height="wrap_content" android:textSize="14sp" android:textColor="#fff" android:id="@+id/cancel" android:text="取消" android:background="@drawable/plugin_camera_title_btn_cancel" android:layout_centerVertical="true" android:layout_marginRight="5dp" android:layout_alignParentRight="true" /> </RelativeLayout> <RelativeLayout android:id="@+id/bottom_layout" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentBottom="true" android:background="@drawable/plugin_camera_bottom_bar" android:layout_marginTop="3dp" > <Button android:id="@+id/preview" android:layout_width="90dp" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:text="预览" android:background="@drawable/plugin_camera_title_btn_preview" /> <Button android:id="@+id/ok_button" android:layout_width="90dp" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:background="@drawable/plugin_camera_ok_btn_state" /> </RelativeLayout> <GridView android:id="@+id/myGrid" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@id/bottom_layout" android:layout_below="@id/headview" android:layout_centerInParent="true" android:layout_marginTop="2dp" android:horizontalSpacing="10dp" android:numColumns="4" android:verticalSpacing="10dp" android:background="#E1E0DE" /> <TextView android:id="@+id/myText" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="相册没有图片" android:textColor="@color/black" /> </RelativeLayout>

同样也是用了GridView,获取手机中的图片,添加到数组中,显示

这里用到了一个AlbumHelper(相册帮助类),网上找的代码,感觉挺好的

public List<ImageBucket> getImagesBucketList(boolean refresh) { if (refresh || (!refresh && !hasBuildImagesBucketList)) { buildImagesBucketList(); } List<ImageBucket> tmpList = new ArrayList<ImageBucket>(); Iterator<Entry<String, ImageBucket>> itr = bucketList.entrySet() .iterator(); while (itr.hasNext()) { Entry<String, ImageBucket> entry = (Entry<String, ImageBucket>) itr .next(); tmpList.add(entry.getValue()); } return tmpList; }

获取到数据源之后,该显示了,也就是利用的获取图片帮助类里面的方法

// 初始化,给一些对象赋值 private void init() { helper = AlbumHelper.getHelper(); helper.init(getApplicationContext()); contentList = helper.getImagesBucketList(false); dataList = new ArrayList<ImageItem>(); for(int i = 0; i<contentList.size(); i++){ dataList.addAll( contentList.get(i).imageList ); } back = (Button) findViewById(R.id.back); cancel = (Button) findViewById(R.id.cancel); cancel.setOnClickListener(new CancelListener()); back.setOnClickListener(new BackListener()); preview = (Button) findViewById(R.id.preview); preview.setOnClickListener(new PreviewListener()); intent = getIntent(); Bundle bundle = intent.getExtras(); gridView = (GridView) findViewById(R.id.myGrid); gridImageAdapter = new AlbumGridViewAdapter(mContext,dataList,Bimp.tempSelectBitmap); gridView.setAdapter(gridImageAdapter); tv = (TextView) findViewById(R.id.myText); gridView.setEmptyView(tv); okButton = (Button) findViewById(R.id.ok_button); okButton.setText("完成"+"(" + Bimp.tempSelectBitmap.size() + "/"+ NeedApplication.picNums+")"); } gridImageAdapter .setOnItemClickListener(new AlbumGridViewAdapter.OnItemClickListener() { @Override public void onItemClick(final ToggleButton toggleButton, int position, boolean isChecked,Button chooseBt) { if (Bimp.tempSelectBitmap.size() >= NeedApplication.picNums) { toggleButton.setChecked(false); chooseBt.setVisibility(View.GONE); if (!removeOneData(dataList.get(position))) { Toast.makeText(AlbumActivity.this, "超出可选图片张数", Toast.LENGTH_SHORT).show(); } return; } if (isChecked) { chooseBt.setVisibility(View.VISIBLE); Bimp.tempSelectBitmap.add(dataList.get(position)); okButton.setText("完成"+"(" + Bimp.tempSelectBitmap.size() + "/"+ NeedApplication.picNums+")"); } else { Bimp.tempSelectBitmap.remove(dataList.get(position)); chooseBt.setVisibility(View.GONE); okButton.setText("完成"+"(" + Bimp.tempSelectBitmap.size() + "/"+ NeedApplication.picNums+")"); } isShowOkBt(); } });

点击图片选择加到公有图片数组中显示已选择。

最后是预览图片,利用自定义viewpager,实现图片滑动,下面贴两张截图吧:

以上就是本文的全部内容,希望对大家的学习有所帮助。

时间: 2024-09-11 03:44:16

Android图片上传实现预览效果的相关文章

Android图片上传实现预览效果_Android

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

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

这篇文章介绍了Asp.net图片上传实现预览效果的简单代码,有需要的朋友可以参考一下   在页面上放入一个上传控件和一个图片控件. 复制代码 代码如下:  <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>         <asp:Image ID="Image1" runat="

asp.net文件图片上传带预览效果

asp教程.net文件图片上传带预览效果 图片预览主要包括两个部分:从file表单控件获取图像数据,根据数据显示预览图像. 程序的file和img属性就是用来保存file控件和显示预览图像的容器的,而img还必须是img元素. 程序有以下几种预览方式: simple模式:直接从file的value获取图片路径来显示预览,适用于ie6: filter模式:通过selection获取file的图片路径,再用滤镜来显示预览,适用于ie7/8: domfile模式:调用file的getAsDataURL

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

本文实例讲述了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

利用jquery.uploadify插件来实现图片上传和预览效果

文章是告诉你如何利用jquery.uploadify插件来实现图片上传和预览效果,首页我们要看看关于利用jquery uploadify上传图片要注意事项吧. 注意事项 (1).如果页面没有显示"browse"按钮,则说明你的'uploader' : '<%=basepath%>images/uploadify.swf'配置不对,检查下路径是否正确. (2).如果需要修改按钮的图片:可以使用'buttonimg'配置进行替换 (3).上传完成后,'oncomplete'事件

jquery 图片上传本地预览效果代码

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net /1999/xhtml" > <head>     <meta http-

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

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

php 图片上传并预览效果

if(!isset($_session))session_start(); /**2010-6-22  * $data 数组类型    包含以下变量  -------------------------------  * $sub_type        submit类型(upload:上传按钮    delete:删除按钮),默认upload  * $file            通过表单获取的$_files['filename']数组  * $img_tag_id        预览图片的

jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

  这篇文章主要介绍了jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码,非常的简单实用,效果也很棒,有需要的小伙伴可以参考下. 网页端 裁剪图片,不需要经过服务器. 这个是用 https://github.com/mailru/FileAPI 框架实现的.配合jcrop. 高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度. 核心代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21