精华内容
下载资源
问答
  • 上传图片时如何在页面显示图片可以让用户浏览到自己选择的图片
  • 在很多的网站可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?   下面说一下我的实现过程(只是个人实现思路,实际网站怎...

    题外话:推荐一个专注于Java开发的网站,做提升学习,价值阅读:Java知音

    同时,扫码关注后端技术精选,回复“学习资料”,领取100套小程序源码+小程序开发视频和基本Java经典书籍电子版


    在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?

     

    下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的不太清楚)

    实现的思路:

    工具:MySQL,eclipse

    首先,在MySQL中创建了两个表,一个t_user表,用来存放用户名,密码等个人信息,

    一个t_touxiang表,用来存放上传的图片在服务器中的存放路径,以及图片名字和用户ID,

    T_touxiang表中的用户ID对应了t_user中的id。

     

    t_user表SQL:

    DROP TABLE IF EXISTS `t_user`;
    CREATE TABLE `t_user` (
      `id` int(10) NOT NULL AUTO_INCREMENT,
      `username` varchar(20) NOT NULL,
      `password` varchar(255) NOT NULL,
      PRIMARY KEY (`id`),
      UNIQUE KEY `username` (`username`)
    ) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;
    

     

    T_touxiang表SQL:

     

    DROP TABLE IF EXISTS `t_touxiang`;
    CREATE TABLE `t_touxiang` (
      `id` int(10) NOT NULL AUTO_INCREMENT,
      `image_path` varchar(255) DEFAULT NULL,
      `user_id` int(11) DEFAULT NULL,
      `old_name` varchar(255) DEFAULT NULL,
      PRIMARY KEY (`id`),
      KEY `img_user` (`user_id`),
      CONSTRAINT `img_user` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
    

     

    首先,写一个UploadServlet.java,用来处理图片文件的上传,并将图片路径,图片名称等信息存放到t_touxiang数据表中,代码如下:

     

    @WebServlet("/UploadServlet.do")
    public class UploadServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
    
        protected void service(HttpServletRequest request, HttpServletResponse response)
    	    throws ServletException, IOException {
    	// 判断上传表单是否为multipart/form-data类型
    	HttpSession session = request.getSession();
    	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
    							 // 中
    
    	if (ServletFileUpload.isMultipartContent(request)) {
    
    	    try {
    		// 1. 创建DiskFileItemFactory对象,设置缓冲区大小和临时文件目录
    		DiskFileItemFactory factory = new DiskFileItemFactory();
    		// System.out.println(System.getProperty("java.io.tmpdir"));//默认临时文件夹
    
    		// 2. 创建ServletFileUpload对象,并设置上传文件的大小限制。
    		ServletFileUpload sfu = new ServletFileUpload(factory);
    		sfu.setSizeMax(10 * 1024 * 1024);// 以byte为单位 不能超过10M 1024byte =
    						 // 1kb 1024kb=1M 1024M = 1G
    		sfu.setHeaderEncoding("utf-8");
    
    		// 3.
    		// 调用ServletFileUpload.parseRequest方法解析request对象,得到一个保存了所有上传内容的List对象。
    		@SuppressWarnings("unchecked")
    		List<FileItem> fileItemList = sfu.parseRequest(request);
    		Iterator<FileItem> fileItems = fileItemList.iterator();
    
    		// 4. 遍历list,每迭代一个FileItem对象,调用其isFormField方法判断是否是上传文件
    		while (fileItems.hasNext()) {
    		    FileItem fileItem = fileItems.next();
    		    // 普通表单元素
    		    if (fileItem.isFormField()) {
    			String name = fileItem.getFieldName();// name属性值
    			String value = fileItem.getString("utf-8");// name对应的value值
    
    			System.out.println(name + " = " + value);
    		    }
    		    // <input type="file">的上传文件的元素
    		    else {
    			String fileName = fileItem.getName();// 文件名称
    			System.out.println("原文件名:" + fileName);// Koala.jpg
    
    			String suffix = fileName.substring(fileName.lastIndexOf('.'));
    			System.out.println("扩展名:" + suffix);// .jpg
    
    			// 新文件名(唯一)
    			String newFileName = new Date().getTime() + suffix;
    			System.out.println("新文件名:" + newFileName);// image\1478509873038.jpg
    
    			// 5. 调用FileItem的write()方法,写入文件
    			File file = new File("D:/lindaProjects/mySpace/wendao/WebContent/touxiang/" + newFileName);
    			System.out.println(file.getAbsolutePath());
    			fileItem.write(file);
    
    			// 6. 调用FileItem的delete()方法,删除临时文件
    			fileItem.delete();
    
    			/*
    			 * 存储到数据库时注意 1.保存源文件名称 Koala.jpg 2.保存相对路径
    			 * image/1478509873038.jpg
    			 * 
    			 */
    			if (user != null) {
    			    int myid = user.getId();
    			    String SQL = "INSERT INTO t_touxiang(image_path,user_id,old_name)VALUES(?,?,?)";
    			    int rows = JdbcHelper.insert(SQL, false, "touxiang/" + newFileName, myid, fileName);
    			    if (rows > 0) {
    				session.setAttribute("image_name", fileName);
    				session.setAttribute("image_path", "touxiang/" + newFileName);
    				response.sendRedirect(request.getContextPath() + "/upImage.html");
    			    } else {
    
    			    }
    
    			} else {
    			    session.setAttribute("loginFail", "请登录");
    			    response.sendRedirect(request.getContextPath() + "/login.html");
    			}
    
    		    }
    		}
    
    	    } catch (FileUploadException e) {
    		e.printStackTrace();
    	    } catch (Exception e) {
    		e.printStackTrace();
    	    }
    
    	}
        }
    }
    

     

    在完成图片上传并写入数据库的同时,将图片路径通过session的方式发送到HTML界面

     

     

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="UTF-8">
    
    <title>更换头像</title>
    
    </head>
    
    <body>
    
             <formaction="UploadServlet.do" method="post"enctype="multipart/form-data">
    
                         本地目录:<inputtype="file" name="uploadFile">
    
               <img src="${image_path}" width="200" height="200">
    
                    <inputtype="submit" value="上传头像"/>
    
       </form>
    
    </body>
    
    </html>

     

    至此,图片上传数据库和本地服务器已经实现,那么如何在HTML界面显示出个人信息以及上传的头像呢?

     

     

    首先定义一个PersonServlet类,用来读取数据库的内容,并发送到HTML界面。

    代码如下:

    @WebServlet("/persons.do")
    public class PersonServlet extends HttpServlet {
    
        private static final long serialVersionUID = -800352785988546254L;
    
        protected void service(HttpServletRequest request, HttpServletResponse response)
    	    throws ServletException, IOException {
    	// 判断上传表单是否为multipart/form-data类型
    	Touxiang tx=null;
    	
    	HttpSession session = request.getSession();
    	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
    	if(user!=null){
    	    int myid=user.getId();
    	    String SQL="SELECT id,image_path,old_name FROM t_touxiang WHERE user_id=?";
    	    ResultSet rs=JdbcHelper.query(SQL,myid);
    	    String uSQL="SELECT username,password FROM t_user WHERE id=?";
    	    ResultSet urs=JdbcHelper.query(uSQL,myid);
    	    System.out.println( "我的个人id是: " + myid);
    	    final List<Touxiang> touxiang=new ArrayList<>();
    	    try {
    		if(rs.next())
    		{
    		    tx=new Touxiang();
    		    tx.setId(rs.getInt(1));
    		    tx.setImage_path(rs.getString(2));
    		    tx.setOld_name(rs.getString(3));
    		    touxiang.add(tx);
    		}
    		if(urs.next()){
    		    user.setUsername(urs.getString(1));
    		    user.setPassword(urs.getString(2));
    		    user.setTouxiang(touxiang);
    		}
    		
    	    } catch (SQLException e) {
    		// TODO Auto-generated catch block
    		e.printStackTrace();
    	    }
    	   
    		session.setAttribute("user", user);
    		System.out.println( "我的id: " + myid);
    		response.sendRedirect( request.getContextPath() + "/person.html");
    	}
        }
    }
    

     

    在HTML界面接收信息,并显示出来,代码如下:

     

    <div>
    	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
          		 <div><a href="$path/upImage.html">更换头像</a></div>
            	
            	#foreach( $ut in  $user.getTouxiang() )
            	 <img src=" $ut.getImage_path()"  width="200" height="200">
            	 #end
            	 <div>我的头像:</div>
            	 <div>我的姓名:$user.getUsername()</div>
            	 <div><a href="$path/myAnswer.do">我的解答</a></div>
    		<div><a href="$path/myQuestion.do">我的提问</a></div>
       	 </form>
    	</div>
    <div>
    	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
          		 <div><a href="$path/upImage.html">更换头像</a></div>
            	
            	#foreach( $ut in  $user.getTouxiang() )
            	 <img src=" $ut.getImage_path()"  width="200" height="200">
            	 #end
            	 <div>我的头像:</div>
            	 <div>我的姓名:$user.getUsername()</div>
            	 <div><a href="$path/myAnswer.do">我的解答</a></div>
    		<div><a href="$path/myQuestion.do">我的提问</a></div>
       	 </form>
    	</div>

     

    至此,一个基于Java的头像上传服务器,路径存储在MySQL,并在HTML界面读取出来的功能就基本实现了。头像上传之前进行处理等操作,可以选择一些插件来完成。这里只是简单的实现了基本功能。

     

     

    补充

    对于图片上传,这里只是简单的用Servlet实现了一下最基本的功能,仅提供思路。如果使用spring等框架,他都对图片上传做了很好的封装,应该更加容易。

    后台实现图片上传应该来说比较容易,但是比较头疼的是图片上传原生的按钮丑出天际,这里推荐俩实用的上传控件,应该算比较好看。

     

    1,H5实现的图片上传,可多张上传,可点击可拖拽上传,大概是这个样子:

    基本的使用介绍和下载地址:http://blog.csdn.net/weixin_36380516/article/details/70352689

     

    2,jQuery图像裁剪插件,大概长这样

     

    不仅提供上传,还有裁剪等功能,UI做的也美,

    地址:http://www.jq22.com/jquery-info318

     

    展开全文
  • Android 选择图片上传图片之PictureSelector

    万次阅读 多人点赞 2018-02-08 16:55:34
    效果图: 之前出过一篇 Android 选择图片上传图片之ImagePicker,这个是okgo作者出的,就一般需求来讲是够了,但是没有压缩,需要自己去搞。...可以看这里Android 选择图片上传图片之Matisse),也...

    效果图:
    这里写图片描述这里写图片描述这里写图片描述这里写图片描述

    【注意】Demo已更新到最新版本,并稍作调整。(2019-07-05)


    之前出过一篇 Android 选择图片、上传图片之ImagePicker,这个是okgo作者出的,就一般需求来讲是够了,但是没有压缩,需要自己去搞。
    后来业务需求提升,页面要美,体验要好,便不是那么满足需求了,所幸在github上找到PictureSelector(然后当时没多久Matisse就开源了…可以看这里Android 选择图片、上传图片之Matisse),也不用自己再撸一个了,下面来介绍介绍PictureSelector

    github

    https://github.com/LuckSiege/PictureSelector

    目前是一直在维护的,支持从相册或拍照选择图片或视频、音频,支持动态权限获取、裁剪(单图or多图裁剪)、压缩、主题自定义配置等功能、适配android 6.0+系统,而且你能遇到的问题,README文档都有解决方案。

    功能特点

    功能齐全,且兼容性好,作者也做了兼容测试

    1.适配android6.0+系统
    2.解决部分机型裁剪闪退问题
    3.解决图片过大oom闪退问题
    4.动态获取系统权限,避免闪退
    5.支持相片or视频的单选和多选
    6.支持裁剪比例设置,如常用的 1:1、3:4、3:2、16:9 默认为图片大小
    7.支持视频预览
    8.支持gif图片
    9.支持.webp格式图片
    10.支持一些常用场景设置:如:是否裁剪、是否预览图片、是否显示相机等
    11.新增自定义主题设置
    12.新增图片勾选样式设置
    13.新增图片裁剪宽高设置
    14.新增图片压缩处理
    15.新增录视频最大时间设置
    16.新增视频清晰度设置
    17.新增QQ选择风格,带数字效果
    18.新增自定义 文字颜色 背景色让风格和项目更搭配
    19.新增多图裁剪功能
    20.新增LuBan多图压缩
    21.新增单独拍照功能
    22.新增压缩大小设置
    23.新增Luban压缩档次设置
    24.新增圆形头像裁剪
    25.新增音频功能查询

    主题配置

    这个就想怎么改就怎么改了

    <!--默认样式 注意* 样式只可修改,不能删除任何一项 否则报错-->
        <style name="picture.default.style" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <!--标题栏背景色-->
            <item name="colorPrimary">@color/bar_grey</item>
            <!--状态栏背景色-->
            <item name="colorPrimaryDark">@color/bar_grey</item>
            <!--是否改变图片列表界面状态栏字体颜色为黑色-->
            <item name="picture.statusFontColor">false</item>
            <!--返回键图标-->
            <item name="picture.leftBack.icon">@drawable/picture_back</item>
            <!--标题下拉箭头-->
            <item name="picture.arrow_down.icon">@drawable/arrow_down</item>
            <!--标题上拉箭头-->
            <item name="picture.arrow_up.icon">@drawable/arrow_up</item>
            <!--标题文字颜色-->
            <item name="picture.title.textColor">@color/white</item>
            <!--标题栏右边文字-->
            <item name="picture.right.textColor">@color/white</item>
            <!--图片列表勾选样式-->
            <item name="picture.checked.style">@drawable/checkbox_selector</item>
            <!--开启图片列表勾选数字模式-->
            <item name="picture.style.checkNumMode">false</item>
            <!--选择图片样式0/9-->
            <item name="picture.style.numComplete">false</item>
            <!--图片列表底部背景色-->
            <item name="picture.bottom.bg">@color/color_fa</item>
            <!--图片列表预览文字颜色-->
            <item name="picture.preview.textColor">@color/tab_color_true</item>
            <!--图片列表已完成文字颜色-->
            <item name="picture.complete.textColor">@color/tab_color_true</item>
            <!--图片已选数量圆点背景色-->
            <item name="picture.num.style">@drawable/num_oval</item>
            <!--预览界面标题文字颜色-->
            <item name="picture.ac_preview.title.textColor">@color/white</item>
            <!--预览界面已完成文字颜色-->
            <item name="picture.ac_preview.complete.textColor">@color/tab_color_true</item>
            <!--预览界面标题栏背景色-->
            <item name="picture.ac_preview.title.bg">@color/bar_grey</item>
            <!--预览界面底部背景色-->
            <item name="picture.ac_preview.bottom.bg">@color/bar_grey_90</item>
            <!--预览界面状态栏颜色-->
            <item name="picture.status.color">@color/bar_grey_90</item>
            <!--预览界面返回箭头-->
            <item name="picture.preview.leftBack.icon">@drawable/picture_back</item>
            <!--是否改变预览界面状态栏字体颜色为黑色-->
            <item name="picture.preview.statusFontColor">false</item>
            <!--裁剪页面标题背景色-->
            <item name="picture.crop.toolbar.bg">@color/bar_grey</item>
            <!--裁剪页面状态栏颜色-->
            <item name="picture.crop.status.color">@color/bar_grey</item>
            <!--裁剪页面标题文字颜色-->
            <item name="picture.crop.title.color">@color/white</item>
            <!--相册文件夹列表选中图标-->
            <item name="picture.folder_checked_dot">@drawable/orange_oval</item>
        </style>
    

    功能配置

    // 进入相册 以下是例子:用不到的api可以不写
     PictureSelector.create(MainActivity.this)
     	.openGallery()//全部.PictureMimeType.ofAll()、图片.ofImage()、视频.ofVideo()、音频.ofAudio()
     	.theme()//主题样式(不设置为默认样式) 也可参考demo values/styles下 例如:R.style.picture.white.style
     	.maxSelectNum()// 最大图片选择数量 int
     	.minSelectNum()// 最小选择数量 int
    	.imageSpanCount(4)// 每行显示个数 int
     	.selectionMode()// 多选 or 单选 PictureConfig.MULTIPLE or PictureConfig.SINGLE
     	.previewImage()// 是否可预览图片 true or false
     	.previewVideo()// 是否可预览视频 true or false
    	.enablePreviewAudio() // 是否可播放音频 true or false
     	.isCamera()// 是否显示拍照按钮 true or false
    	.imageFormat(PictureMimeType.PNG)// 拍照保存图片格式后缀,默认jpeg
    	.isZoomAnim(true)// 图片列表点击 缩放效果 默认true
    	.sizeMultiplier(0.5f)// glide 加载图片大小 0~1之间 如设置 .glideOverride()无效
    	.setOutputCameraPath("/CustomPath")// 自定义拍照保存路径,可不填
     	.enableCrop()// 是否裁剪 true or false
     	.compress()// 是否压缩 true or false
     	.glideOverride()// int glide 加载宽高,越小图片列表越流畅,但会影响列表图片浏览的清晰度
     	.withAspectRatio()// int 裁剪比例 如16:9 3:2 3:4 1:1 可自定义
     	.hideBottomControls()// 是否显示uCrop工具栏,默认不显示 true or false
     	.isGif()// 是否显示gif图片 true or false
    	.compressSavePath(getPath())//压缩图片保存地址
     	.freeStyleCropEnabled()// 裁剪框是否可拖拽 true or false
     	.circleDimmedLayer()// 是否圆形裁剪 true or false
     	.showCropFrame()// 是否显示裁剪矩形边框 圆形裁剪时建议设为false   true or false
     	.showCropGrid()// 是否显示裁剪矩形网格 圆形裁剪时建议设为false    true or false
     	.openClickSound()// 是否开启点击声音 true or false
     	.selectionMedia()// 是否传入已选图片 List<LocalMedia> list
     	.previewEggs()// 预览图片时 是否增强左右滑动图片体验(图片滑动一半即可看到上一张是否选中) true or false
     	.cropCompressQuality()// 裁剪压缩质量 默认90 int
     	.minimumCompressSize(100)// 小于100kb的图片不压缩 
     	.synOrAsy(true)//同步true或异步false 压缩 默认同步
     	.cropWH()// 裁剪宽高比,设置如果大于图片本身宽高则无效 int 
     	.rotateEnabled() // 裁剪是否可旋转图片 true or false
     	.scaleEnabled()// 裁剪是否可放大缩小图片 true or false
     	.videoQuality()// 视频录制质量 0 or 1 int
    	.videoMaxSecond(15)// 显示多少秒以内的视频or音频也可适用 int 
        .videoMinSecond(10)// 显示多少秒以内的视频or音频也可适用 int 
    	.recordVideoSecond()//视频秒数录制 默认60s int
    	.isDragFrame(false)// 是否可拖动裁剪框(固定)
     	.forResult(PictureConfig.CHOOSE_REQUEST);//结果回调onActivityResult code     
    

    集成方式

    compile引入

    dependencies {
        implementation 'com.github.LuckSiege.PictureSelector:picture_library:v2.2.3'
    }
    

    build.gradle加入

    allprojects {
       repositories {
          jcenter()
          maven { url 'https://jitpack.io' }
       }
    }
    

    使用

    使用非常简单,你想要的基本上都有

    
    package com.yechaoa.pictureselectordemo;
    
    import android.Manifest;
    import android.annotation.SuppressLint;
    import android.content.Intent;
    import android.graphics.Color;
    import android.graphics.drawable.ColorDrawable;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.GridLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.view.Gravity;
    import android.view.View;
    import android.view.WindowManager;
    import android.widget.PopupWindow;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import com.luck.picture.lib.PictureSelector;
    import com.luck.picture.lib.config.PictureConfig;
    import com.luck.picture.lib.config.PictureMimeType;
    import com.luck.picture.lib.entity.LocalMedia;
    import com.luck.picture.lib.permissions.Permission;
    import com.luck.picture.lib.permissions.RxPermissions;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import io.reactivex.functions.Consumer;
    
    public class MainActivity extends AppCompatActivity {
    
        private int maxSelectNum = 9;
        private List<LocalMedia> selectList = new ArrayList<>();
        private GridImageAdapter adapter;
        private RecyclerView mRecyclerView;
        private PopupWindow pop;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mRecyclerView = findViewById(R.id.recycler);
    
            initWidget();
        }
    
        private void initWidget() {
            FullyGridLayoutManager manager = new FullyGridLayoutManager(this, 3, GridLayoutManager.VERTICAL, false);
            mRecyclerView.setLayoutManager(manager);
            adapter = new GridImageAdapter(this, onAddPicClickListener);
            adapter.setList(selectList);
            adapter.setSelectMax(maxSelectNum);
            mRecyclerView.setAdapter(adapter);
            adapter.setOnItemClickListener(new GridImageAdapter.OnItemClickListener() {
                @Override
                public void onItemClick(int position, View v) {
                    if (selectList.size() > 0) {
                        LocalMedia media = selectList.get(position);
                        String pictureType = media.getPictureType();
                        int mediaType = PictureMimeType.pictureToVideo(pictureType);
                        switch (mediaType) {
                            case 1:
                                // 预览图片 可自定长按保存路径
                                //PictureSelector.create(MainActivity.this).externalPicturePreview(position, "/custom_file", selectList);
                                PictureSelector.create(MainActivity.this).externalPicturePreview(position, selectList);
                                break;
                            case 2:
                                // 预览视频
                                PictureSelector.create(MainActivity.this).externalPictureVideo(media.getPath());
                                break;
                            case 3:
                                // 预览音频
                                PictureSelector.create(MainActivity.this).externalPictureAudio(media.getPath());
                                break;
                        }
                    }
                }
            });
        }
    
        private GridImageAdapter.onAddPicClickListener onAddPicClickListener = new GridImageAdapter.onAddPicClickListener() {
    
            @SuppressLint("CheckResult")
            @Override
            public void onAddPicClick() {
                //获取写的权限
                RxPermissions rxPermission = new RxPermissions(MainActivity.this);
                rxPermission.requestEach(Manifest.permission.WRITE_EXTERNAL_STORAGE)
                        .subscribe(new Consumer<Permission>() {
                            @Override
                            public void accept(Permission permission) {
                                if (permission.granted) {// 用户已经同意该权限
                                    //第一种方式,弹出选择和拍照的dialog
                                    showPop();
    
                                    //第二种方式,直接进入相册,但是 是有拍照得按钮的
    //                                showAlbum();
                                } else {
                                    Toast.makeText(MainActivity.this, "拒绝", Toast.LENGTH_SHORT).show();
                                }
                            }
                        });
            }
        };
    
        private void showAlbum() {
            //参数很多,根据需要添加
            PictureSelector.create(MainActivity.this)
                    .openGallery(PictureMimeType.ofImage())// 全部.PictureMimeType.ofAll()、图片.ofImage()、视频.ofVideo()、音频.ofAudio()
                    .maxSelectNum(maxSelectNum)// 最大图片选择数量
                    .minSelectNum(1)// 最小选择数量
                    .imageSpanCount(4)// 每行显示个数
                    .selectionMode(PictureConfig.MULTIPLE)// 多选 or 单选PictureConfig.MULTIPLE : PictureConfig.SINGLE
                    .previewImage(true)// 是否可预览图片
                    .isCamera(true)// 是否显示拍照按钮
                    .isZoomAnim(true)// 图片列表点击 缩放效果 默认true
                    //.setOutputCameraPath("/CustomPath")// 自定义拍照保存路径
                    .enableCrop(true)// 是否裁剪
                    .compress(true)// 是否压缩
                    //.sizeMultiplier(0.5f)// glide 加载图片大小 0~1之间 如设置 .glideOverride()无效
                    .glideOverride(160, 160)// glide 加载宽高,越小图片列表越流畅,但会影响列表图片浏览的清晰度
                    .withAspectRatio(1, 1)// 裁剪比例 如16:9 3:2 3:4 1:1 可自定义
                    //.selectionMedia(selectList)// 是否传入已选图片
                    //.previewEggs(false)// 预览图片时 是否增强左右滑动图片体验(图片滑动一半即可看到上一张是否选中)
                    //.cropCompressQuality(90)// 裁剪压缩质量 默认100
                    //.compressMaxKB()//压缩最大值kb compressGrade()为Luban.CUSTOM_GEAR有效
                    //.compressWH() // 压缩宽高比 compressGrade()为Luban.CUSTOM_GEAR有效
                    //.cropWH()// 裁剪宽高比,设置如果大于图片本身宽高则无效
                    .rotateEnabled(false) // 裁剪是否可旋转图片
                    //.scaleEnabled()// 裁剪是否可放大缩小图片
                    //.recordVideoSecond()//录制视频秒数 默认60s
                    .forResult(PictureConfig.CHOOSE_REQUEST);//结果回调onActivityResult code
        }
    
        private void showPop() {
            View bottomView = View.inflate(MainActivity.this, R.layout.layout_bottom_dialog, null);
            TextView mAlbum = bottomView.findViewById(R.id.tv_album);
            TextView mCamera = bottomView.findViewById(R.id.tv_camera);
            TextView mCancel = bottomView.findViewById(R.id.tv_cancel);
    
            pop = new PopupWindow(bottomView, -1, -2);
            pop.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
            pop.setOutsideTouchable(true);
            pop.setFocusable(true);
            WindowManager.LayoutParams lp = getWindow().getAttributes();
            lp.alpha = 0.5f;
            getWindow().setAttributes(lp);
            pop.setOnDismissListener(new PopupWindow.OnDismissListener() {
    
                @Override
                public void onDismiss() {
                    WindowManager.LayoutParams lp = getWindow().getAttributes();
                    lp.alpha = 1f;
                    getWindow().setAttributes(lp);
                }
            });
            pop.setAnimationStyle(R.style.main_menu_photo_anim);
            pop.showAtLocation(getWindow().getDecorView(), Gravity.BOTTOM, 0, 0);
    
            View.OnClickListener clickListener = new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    switch (view.getId()) {
                        case R.id.tv_album:
                            //相册
                            PictureSelector.create(MainActivity.this)
                                    .openGallery(PictureMimeType.ofImage())
                                    .maxSelectNum(maxSelectNum)
                                    .minSelectNum(1)
                                    .imageSpanCount(4)
                                    .selectionMode(PictureConfig.MULTIPLE)
                                    .forResult(PictureConfig.CHOOSE_REQUEST);
                            break;
                        case R.id.tv_camera:
                            //拍照
                            PictureSelector.create(MainActivity.this)
                                    .openCamera(PictureMimeType.ofImage())
                                    .forResult(PictureConfig.CHOOSE_REQUEST);
                            break;
                        case R.id.tv_cancel:
                            //取消
                            //closePopupWindow();
                            break;
                    }
                    closePopupWindow();
                }
            };
    
            mAlbum.setOnClickListener(clickListener);
            mCamera.setOnClickListener(clickListener);
            mCancel.setOnClickListener(clickListener);
        }
    
        public void closePopupWindow() {
            if (pop != null && pop.isShowing()) {
                pop.dismiss();
                pop = null;
            }
        }
    
        @Override
        protected void onActivityResult(int requestCode, int resultCode, Intent data) {
            super.onActivityResult(requestCode, resultCode, data);
            List<LocalMedia> images;
            if (resultCode == RESULT_OK) {
                if (requestCode == PictureConfig.CHOOSE_REQUEST) {// 图片选择结果回调
    
                    images = PictureSelector.obtainMultipleResult(data);
                    selectList.addAll(images);
    
                    //selectList = PictureSelector.obtainMultipleResult(data);
    
                    // 例如 LocalMedia 里面返回三种path
                    // 1.media.getPath(); 为原图path
                    // 2.media.getCutPath();为裁剪后path,需判断media.isCut();是否为true
                    // 3.media.getCompressPath();为压缩后path,需判断media.isCompressed();是否为true
                    // 如果裁剪并压缩了,以取压缩路径为准,因为是先裁剪后压缩的
                    adapter.setList(selectList);
                    adapter.notifyDataSetChanged();
                }
            }
        }
    
    }
    
    
    

    Demo:https://github.com/yechaoa/PictureSelectorDemo


    展开全文
  • 微信上传图片自己的服务器

    万次阅读 2016-06-24 14:40:56
    利用微信的jssdk上传图片之后怎么上传自己的服务器 wx.uploadImage 接口在文件上传成功后,会返回 serverId(即 media_id),种用 serverId 可以去微信服务器去将文件下载到自己的服务器。 api ...

    利用微信的jssdk上传图片之后怎么上传到自己的服务器


    wx.uploadImage 接口在文件上传成功后,会返回 serverId(即 media_id),种用 serverId 可以去微信服务器去将文件下载到自己的服务器。


    api

    拍照或从手机相册中选图接口

    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
        }
    });
    

    预览图片接口

    wx.previewImage({
        current: '', // 当前显示图片的http链接
        urls: [] // 需要预览的图片http链接列表
    });
    

    上传图片接口

    wx.uploadImage({
        localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
            var serverId = res.serverId; // 返回图片的服务器端ID
        }
    });
    

    备注:上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id,参考文档 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html 目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。

    下载图片接口

    wx.downloadImage({
        serverId: '', // 需要下载的图片的服务器端ID,由uploadImage接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
            var localId = res.localId; // 返回图片下载后的本地ID
        }		
    });		
    下载到自己服务器代码
    $accessToken = '公众号 AccessToken';
    $media_id = 'wx.uploadImage 返回的 serverId';
    
    // 要存在你服务器哪个位置?
    $targetName = './tmp/'.date('YmdHis).'.jpg';
    
    $ch = curl_init("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$accessToken}&media_id={$serverId}");
    $fp = fopen(FCPATH.$targetName, 'wb');
    curl_setopt($ch, CURLOPT_FILE, $fp);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_exec($ch);
    curl_close($ch);
    fclose($fp);

    展开全文
  • 类似于QQ空间、微信朋友圈图片上传、用GridView实现多图选择图片上传。包括服务端代码。这是本人就地取材、所以服务端代码可能有部分不相关。有兴趣的朋友可以自己看看、简洁明了的。
  • 效果图: 1、点击“选择文件”,进行选择将要上传的文件;...4、还可以上传多个文件。 效果图上完了,就开始代码咯!   //layUI代码 &lt;div class="layui-upload"&gt; &lt;span...

    效果图:

    1、点击“选择文件”,进行选择将要上传的文件;

    2、选择好将要上传的文件,文件名称显示在“选择文件”按钮后面;

    3、点击“开始上传”按钮,显示在页面上,图片信息传到后台中,将图片进行保存;

    4、还可以上传多个文件。

    效果图上完了,就开始代码咯!

     

    //layUI代码
    <div class="layui-upload">
    	<span style="margin-left: 16px;">单位平面图:   </span>
    	<input type="file" name="file" id="s_pmt_dw" style="width:190px">
    	<button type="button" class="layui-btn" id="test9">上传</button>
    	<div class="layui-upload-list" id="demo2"></div>
    </div>
    //选完文件后不自动上传(js代码,将文件传到后台)
    		  upload.render({
    		    elem: '#s_pmt_dw'				//“选择文件”按钮的ID
    		    ,url: './rest/population/uploadPortrait'	//后台接收地址
    		    ,data: {s_rkbm: '1',type:'S1'}		//传递到后台的数据
    		    ,auto: false				//不自动上传设置
    	    	    ,accept: 'file'				 //允许上传的文件类型
    	  	    ,exts: 'png|jpg|bmp' 			//设置智能上传图片格式文件
    	    	    ,size: 5000 				//最大允许上传的文件大小
    		    ,multiple: true				//设置是否多个文件上传
    		    ,bindAction: '#test9'			//“上传”按钮的ID
    		    ,before: function(obj){
    			    //预读本地文件示例,不支持ie8
    			    obj.preview(function(index, file, result){		//在当前ID为“demo2”的区域显示图片
    			      $('#demo2').append('<img name = "s_pmt_dw" style="width: 120px; height: 150px; margin-left: 16px;" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
    			    });
    			   }
    		    ,done: function(res){
    		      console.log(res)
    		    }
    		  });


     


    这是后台controller层接收图片数据用的

     @RequestMapping(value = "/uploadPortrait", method = RequestMethod.POST)
        public ResponseEntity<?> uploadPortrait(HttpServletRequest request, String s_rkbm,String type, @RequestParam(value = "file")MultipartFile[] files) {
            Response response = new Response();
            try {
                for (int i = 0; i < files.length; i++) {
                    UploadUtils uploadUtils = new UploadUtils();		//UploadUtils 就是一个文件上传的工具类,自己写一个就可以了
                    String id = UuidUtil.get32UUID();
                    //设置目录文件名称
                    //其中images,flashs,medias,files,对应文件夹名称,对应dirName
                    uploadUtils.setDirName("images");
                    //设置文件名称
                    uploadUtils.setFileName(id);
                    //设置上传文件最大值(byte)
                    uploadUtils.setMaxSize(10000000);
                   /**
                    * 开始上传文件
                    * info[0] 验证文件域返回错误信息 info[1] 上传文件错误信息 info[2] savePath info[3] saveUrl info[4] fileUrl
                    */
                    String[] info = uploadUtils.uploadFile(files[i], request);
                    if("true".equals(info[0]) && "true".equals(info[1])){
                        NbdwInfoTp nbdwInfoTp = new NbdwInfoTp();
                        nbdwInfoTp.setS_id(id);
                        nbdwInfoTp.setS_sydw_dwbm(s_rkbm);
                        nbdwInfoTp.setS_xplx(files[i].getContentType());
                        nbdwInfoTp.setS_xpwjmc(info[4]);
                        nbdwInfoTp.setS_xxdjly_zaglywlbdm(type);
                        System.out.println(nbdwInfoTp.toString());
                        int ret = 0;
                        //int ret = populationService.savePopulationRx(actualPopInRx);
                        if(ret == 0){
                            response.setState(EnumStatus.SUCCESS);
                            response.setMessage("文件上传成功 ");
                        }
                    }else{
                        response.setState(EnumStatus.FAIL);
                        response.setMessage("文件上传成功 ");
                    }
                    
                }
            } catch (Exception e) {
                response.setState(EnumStatus.FAIL);
                response.setMessage("文件上传成功 ");
            }
            return backResponse(response);
        }


     

    工具类

    public class Base64UploadUtils {
    	//本地磁盘路径
    	private String path = ConfigManager.getInstance().getConfigItem("Base64Upload_root", "");
    	//图片最大大小(byte)
    	private long maxSize = 1000000;
    	//文件后缀
    	private String suffix = "";  
    	//文件上传相对路径
    	private String basePath = "uploadFiles";
    	// 文件最终的url包括文件名
    	private String fileUrl;
    	// 若不指定则文件名默认为 yyyyMMddHHmmss_xyz
    	private String fileName;
    	// 文件保存目录路径
    	private String savePath;
    	// 文件保存目录url
    	private String saveUrl;
    	// 文件实际大小 KB
    	private long fileSize;
    	// 解码后的base64
    	private byte[] by;
    	
    	public Base64UploadUtils(){
    		
    	}
    	
    	/**
    	 * 文件上传
    	 * @param base64Data base64编码
    	 * @param path 上传路径
    	 * @return infos[0] 文件后缀 infos[1]验证大小 infos[2]保存信息 infos[3]文件大小 infos[4]文件路径
    	 */
    	public String[] uploadFile(String base64Data){
    		String[] infos = new String[5];
    		if (Tools.isEmpty(base64Data)) {
    			infos[0] = "图片数据不能为空";
    		}else {
    			infos[0] = this.validateFormt(base64Data);
    			infos[1] = this.validateSize(base64Data);
    			if (Tools.notEmpty(infos[0]) && Tools.isEmpty(infos[1]) && Tools.notEmpty(path)) {
    				infos[2] = this.SaveImage();
    				infos[3] = (fileSize/1024 + "kb").toString();
    				infos[4] = "/"+ConfigManager.getInstance().getConfigItem("Base64Upload_path", "")+fileUrl.split(path)[1]; //fileUrl.substring(fileUrl.indexOf("/")+1, fileUrl.length());
    			}
    		}
    		return infos;
    	}
    	
    	/**
    	 * 验证格式
    	 * @param base64Data
    	 * @return
    	 */
    	public String validateFormt(String base64Data){
    		if("data:image/jpeg;".equalsIgnoreCase(base64Data.substring(0, base64Data.indexOf(";")+1))){//data:image/jpeg;base64,base64编码的jpeg图片数据  
                suffix = "jpg";  
            } else if("data:image/bmp;".equalsIgnoreCase(base64Data.substring(0, base64Data.indexOf(";")+1))){//data:image/bmp;base64,base64编码的bmp图片数据
                suffix = "bmp";
            } else if("data:image/png;".equalsIgnoreCase(base64Data.substring(0, base64Data.indexOf(";")+1))){//data:image/png;base64,base64编码的png图片数据
                suffix = "png";
            }else{  
            	suffix = "";
            }    
    		return suffix;
    	}
    	
    	/**
    	 * 验证大小并初始化目录
    	 * @param base64Data
    	 * @return
    	 */
    	public String validateSize(String base64Data){
    		String error = "";
    		//截取base64编码前缀
    		base64Data = base64Data.substring(base64Data.indexOf("-")+1, base64Data.length());
    		by = Base64Utils.decodeFromString(base64Data);
    		fileSize = by.length;
    		if (fileSize>maxSize) {
    			error = "上传文件大小超过限制";
    		}else {
    			//创建文件夹
    			savePath = path + "/"+basePath;
    			saveUrl = path + "/"+basePath;
    			File saveDirFile = new File(savePath);
    			if (!saveDirFile.exists()) {
    				saveDirFile.mkdirs();
    			}
    			SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
    			String ymd = sdf.format(new Date());
    			savePath += "/"+ymd;
    			saveUrl +="/"+ymd;
    			File dirFile = new File(savePath);
    			if (!dirFile.exists()) {
    				dirFile.mkdirs();
    			}
    		}
    		return error;
    	}
    	
    	/**
    	 * 保存图片
    	 * @param base64Data
    	 * @return
    	 */
    	public String SaveImage(){
    		String error = "";
    		String newFileName;
    		if (Tools.notEmpty(fileName)) {
    			newFileName = fileName + "."+suffix;
    		}else {
    			SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
                newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + suffix;
    		}
    		fileUrl = saveUrl +"/"+ newFileName;
    		try {
    			FileUtils.writeByteArrayToFile(new File(fileUrl), by);
    			error = "true";
    		} catch (IOException e) {
    			SysLog.error(e);
    			e.printStackTrace();
    		}
    		return error;
    	}
    	
    	
    	
    	public long getMaxSize() {
    		return maxSize;
    	}
    
    	public String getSuffix() {
    		return suffix;
    	}
    
    	public String getBasePath() {
    		return basePath;
    	}
    
    	public String getFileUrl() {
    		return fileUrl;
    	}
    
    	public String getFileName() {
    		return fileName;
    	}
    
    	public String getSavePath() {
    		return savePath;
    	}
    
    	public String getSaveUrl() {
    		return saveUrl;
    	}
    
    	public long getFileSize() {
    		return fileSize;
    	}
    
    	public byte[] getBy() {
    		return by;
    	}
    
    	public void setMaxSize(long maxSize) {
    		this.maxSize = maxSize;
    	}
    
    	public void setFileName(String fileName) {
    		this.fileName = fileName;
    	}
    }
    

     

    这样就完成了图片上传的全过程!由于layUI目前不支持图片和页面中的其他字段一同上传到后台,所以图片将采用异步上传的方式,这样将产生两个请求。

     

     

     

    扫码领红包咯!领取余额宝红包,支付时用余额宝支付,就可以使用了!(少则1元,多则3-10元)时间有限哦

     

     

     

     

     

    展开全文
  • 制作自己的网站详细流程(可以上传自己做的网页) 自己以前做网页都是仅仅做一下,在本地看一下效果。但是最近需要做一个网站在手机上来展示自己网页内容,搜了一下资料,需要用到域名与主机。可能部分朋友不知道它们...
  • 可以删除从库里查询出来的图片,也可以删除刚上传图片,其实不多,为了任务请耐心看完: 效果如下: 1:最开始效果 2:点击上传图片,弹出本地上传,并有删除按钮: 3:点击删除,弹出删除框。 4:点击...
  • 提交表单时候经常会遇到使用ajax,而且表单中会含有图片,文件等等。这时候可以选择使用FormData()来协助完成。 以下是html代码,是一个id=‘submitCompanyInfo’的form,type=‘file’的input,type=‘button’的...
  • 越来越不想写博客了,真的是累,而且还没报酬。...需要上传的路径返回过去,记得把config.json 中的 imageUrlPrefix 清空。后台:返回格式:非常简单,核心是:只要知道哪里改上传的URL 和怎么返回数据格式。...
  • 如何把ueditor上传图片视频等信息写入自己的数据库? 比如我再ueditor里面上传了一个图片,但是图片显示在内容中, 当我删除这条内容时,我希望内容中包含的图片也一同删除? 我的想法是把ue的上传图片信息写入数据库...
  • 上传图片 1.1 需求 在修改商品页面,添加上传商品图片功能。 1.2 springmvc中对多部件类型解析 在 页面form中提交enctype="multipart/form-data"的数据时,需要springmvc对multipart类型的数据进行解析。   在...
  • 我使用ueditor上传图片上传的地址是我自己定义的位置,在F盘。上传 成功图片回显,点击html发现路径不对,是编辑器默认的路径。这个图片 路径和文字一起保存到数据库展示到jsp页面图片肯定读取不出来的 图片: !...
  • 调用微信JS-SDK接口上传图片

    万次阅读 多人点赞 2016-05-21 12:50:35
    最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存,...
  • KindEditor上传本地图片

    万次阅读 2016-02-18 10:31:23
    自己动手配置了一下KindEditor文本编辑器上传本地图片的功能,不需要动手写action,相关详细配置和代码如下。
  • Layui框架实现图片上传

    万次阅读 多人点赞 2019-08-02 17:05:47
    Layui框架实现图片上传 前言: 一直以来,图片上传总是件很麻烦的事。最近在学layui,发现layui真是极大简化了各种复杂的操作,避免了繁琐的开发。 layui图片上传和传统的图片上传不同,它并不予表单元素并存,而是...
  • 图片上传和回显 环境: springMVC + spring + mybatis  使用:ajaxfileupload.js 扩展包 + ajax异步请求 思想流程:  1.定义一个file文件上传标签,添加单击事件   2.点击单击事件,单击事件完成上传...
  • Java图片上传

    万次阅读 2015-05-15 17:46:40
    图片上传,其实,也可以按照之前文章——文件上传的方式实现,因为图片也是文件。只要是文件,都可以用流来接收,然后把流给写出到指定的物理空间下,形成我们需要的物理文件。 今天,我们就不用上传文件的方式,...
  • 七牛图片上传demo

    热门讨论 2015-04-21 16:43:40
    七牛图片上传demo,需自己获取token
  • KindEditor上传图片和修改图片

    万次阅读 2018-08-29 10:59:21
    1.首先就是下载KindEditor(这里是官网的地址) 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件,... 您可以根据需求删除以下目录后上传到服务器。 asp - ASP程序 asp.net - ASP.NET程序 php - PHP程序 js...
  • neditor本地上传图片

    千次阅读 2018-12-26 15:09:58
    与ue不同,ne的自定义上传接口在neditor.service.js中,其实这个文件已经写的非常详细了,只需要做一点简单的修改就可以实现本地上传图片功能: /** * 自定义上传接口 * 由于所有Neditor请求都通过editor对象的...
  • 如题,因为有些文件可能上传了但是并没有使用到,总不能一直占着空间,想到的就是开个线程定时给他清理一波,有没有类似的场景或者解决方案能够交流学习一下~
  • 使用AFN上传图片 下载图片

    千次阅读 2016-09-05 14:38:50
    准备一张图片转化为NSData 设置一个目录路径 path 把data 写入到路径里面使用AFN上传 废话不多说 直接上代码 - (void)uploadImage {  UIImage *image = [UIImage imageNamed:@"icon.png"]
  • Android压缩图片后再上传图片

    万次阅读 热门讨论 2016-05-24 18:29:08
    在Android开发中上传图片(头像)到服务器,要先压缩图片,获取原图的长宽,然后取得压缩比例,compress到指定的质量,输出保存,然后网络上传这张图片就行了。--需要android顶尖学习资料和VIP视频的可以加我Q:...
  • 如果一个程序里有多处地方用到用户上传图片等功能的话,建议还是放到阿里云或者千牛云等其他平台上来存储我们的图片可以给公司的服务器减少很多压力,磁盘存储也就不会太大 2、提升用户体验感 我们开发的产品...
  • 图片上传预览功能

    万次阅读 2016-07-04 10:17:31
    但是,这样会有一个弊端:如果客户对自己上传图片不满意,再次换一张图片上传,反复多次,那么就会造成服务器资源的浪费。还会导致很多无用的图片,在服务器上占用资源。 那么,能不能在线预览呢?答案是肯定的。 ...
  • tinyMCE上传图片

    万次阅读 2018-07-29 11:36:34
    我比较了几个编辑器,最终选用这个,因为功能比较强大,能够实现代码编写,图片上传,插入连接等功能。今天就来说说图片上传。(本地图片上传) 一: 大致介绍 我们的需求是允许用户在文章编写过程中插入图片并将...
  • Android 选择图片上传图片之Matisse

    千次阅读 2018-02-09 12:26:50
    已选择的图片再次选择不能带过去 剪裁 压缩 权限 Glide版本过低 但是,也是有特点的 MD风格 白天模式和夜间模式 其他与同类相比也真的没什么了,唯一背书 就是知乎团队出的呗。。 相比之下,昨天...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 214,183
精华内容 85,673
关键字:

哪些网站可以上传自己的图片