精华内容
下载资源
问答
  • 表单图片上传

    2017-11-02 16:26:02
    表单图片上传,form图片上传 免缓存 图片上传 图片上传
  • 这篇博客也不知道起个什么名字比较好,毕竟刚开始学习vue,很多还不是很熟悉,一直在慢慢摸索中;之前也习惯了用jQuery写js代码,思维逻辑也要有个转换的过程。 1. 转变思维 使用vue编写代码,首先要做的就是转换...
  • 表单上传图片显示

    2019-12-13 10:15:56
    图片上传按钮隐藏--%> < input type = " file " name = " img " style =" display : none " > < img src = " 1.jpg " id = " img_img " style =" width : 100px ; height : 100px ; " > ...
    <dependency>
          <groupId>commons-io</groupId>
          <artifactId>commons-io</artifactId>
          <version>2.6</version>
        </dependency>
    

    web.xml 3.0

    <servlet>
    <?xml version="1.0" encoding="UTF-8"?>
    
    <web-app
            version="3.0"
            xmlns="http://java.sun.com/xml/ns/javaee"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    
    
    <display-name>Archetype Created Web Application</display-name>
    
      <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-*.xml</param-value>
      </context-param>
    
      <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
      </filter>
      <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
      </filter-mapping>
      <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
      </listener>
    
      <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
        <multipart-config></multipart-config>
      </servlet>
      <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
      </servlet-mapping>
    </web-app>
    
    
    package com.lanou;
    
    import org.apache.commons.io.FileUtils;
    import org.apache.commons.io.IOUtils;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    import javax.servlet.http.HttpServletRequest;
    import java.io.File;
    import java.io.IOException;
    import java.util.Date;
    
    @Controller
    public class TestController {
    
        @ResponseBody
    
        @PostMapping("/upload2")
        public String aa(MultipartFile img, HttpServletRequest request) throws IOException {
            System.out.println(img.getSize());
            //获取文件保存地址目录
            String realPath = request.getServletContext().getRealPath("/imgs");
            //生成一个文件名
            String imgName=new Date().getTime()+".jpg";
            //保存文件(复制)
    //        IOUtils.
            FileUtils.copyToFile(img.getInputStream(),new File(realPath+"/"+imgName));
            //获取文件的访问地址
            String imgUrl="/imgs/"+imgName;
            System.out.println(imgUrl);
            return imgUrl;
        }
    }
    
    
    <html>
    <head>
        <script src="/lib/jquery-3.2.1.min(1).js"></script>
        <script src="/lib/jquery.form.js"></script>
    </head>
    <body>
    <h2>Hello World!</h2>
    <form id="uploadForm" >
        <input type="file" name="img">
        <button type="button" id="uploadBtn">upload</button>
    
    
    
    
    <script>
        $("#uploadBtn").click(function () {
            //提交当前表单
            $("#uploadForm").ajaxSubmit({
                url:"/upload2",
                type:"post",
                success:function (data) {
                    alert(data);
    
                    var img='<img src="'+data+'"/>';
                    $("#uploadForm").after(img);
                }
            })
        });
    
    
    </script>
    </form>
    </body>
    </html>
    
    

    或者

    <html>
    <head>
        <script src="/lib/jquery-3.2.1.min(1).js"></script>
        <script src="/lib/jquery.form.js"></script>
    
        <style>
            #img_img:hover {
                cursor: pointer;
                border: #333333 solid 1px;
            }
        </style>
    </head>
    <body>
    <h2>Hello World!</h2>
    <form id="uploadForm">
        <%--图片上传按钮隐藏--%>
        <input type="file" name="img" style="display: none">
        <img src="1.jpg" id="img_img" style="width: 100px; height: 100px;">
    
    </form>
    
    
    <script>
    
        $("#img_img").click(function () {
            //点击图片激活上传按钮
            $("input[name='img']").click();
        });
    
        $('input[name="img"]').change(function () {
            //提交当前表单
            $("#uploadForm").ajaxSubmit({
                url: "/upload2",
                type: "post",
                success: function (data) {
                    // alert(data);
    
                    var img = '<img src="' + data + '"/>';
                    $("#img_img").attr("src", data);
                }
            })
        });
    
    
    </script>
    </form>
    </body>
    </html>
    
    
    展开全文
  • 今天小编就为大家分享一篇element-ui 上传图片后清空图片显示的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 前端开发想省时间就是要找框架呀!找框架! vant中上传图片组件:https://youzan.github.io/vant/#/zh-CN/uploader 上传图片的组件uploader: *> method中 methods: { //选择图片后执行 onRead(fi
  • 上传图片后直接显示的方法 html: <button class="btn btn-info" id="uploadImage">上传图片</button> <input type="file" name="img" style="display:none"> <div class="imageShow">...

     上传图片后直接显示的方法

    html:
    <button class="btn btn-info" id="uploadImage">上传图片</button>
    <input type="file" name="img" style="display:none">
    <div class="imageShow">
    </div>

     

    js:
    // 先加载jq
    <script>

    $(document).ready(function () {

       $('#uploadImage').click(function(){
    $('[name="
    img"]').trigger('click');
       })
    $('input[name="img"]').change(function(){
    $('.imageShow').html('<img class="addImagees" src="'+ window.URL.createObjectURL( $('[name="img"]')[0].files[0])+'" width="100%" /> ');
    })
    });

    </script>

     

    转载于:https://www.cnblogs.com/xueT/p/8309163.html

    展开全文
  • layui图片上传功能,和表单同步上传或只上传表单,若看不懂,文件里有完整项目分享
  • 表单上传图片

    2020-09-29 10:49:08
    在网页的表单中添加上传图片功能 1,在表单中创建一个区域存放图片。 (1)因为要考虑页面压缩挤压图片导致图片错位所以使用bootstrap中的col。默认宽度最小时候col-12(直接占满一行), col-lg-3在大的布局情况下...

    在网页的表单中添加上传图片功能
    1,在表单中创建一个区域存放图片。
    (1)因为要考虑页面压缩挤压图片导致图片错位所以使用bootstrap中的col。默认宽度最小时候col-12(直接占满一行), col-lg-3在大的布局情况下(col的宽度到lg的时候)就占3。
    (2)指定row:图片比较小的时候要进行一个居中。
    (3)justify-content-center在内容的中间对齐
    (4)在img中 class:“img-fluid” 这个类是bootstrap提供的图片标签的样式,主要是绑定图片自适应的问题,会去自适应图片比例(fluid:填充)。
    alt:提示作用,当图片未加载时显示一行文字提示。
    style=“max-height:168px;”:限制最大高度,如果没有限制图片会把表单撑的非常高。
    在这里插入图片描述

    在ID外面加一个文件选择器,为了表单直接提交,一般把文件选择器放在外层。
    在这里插入图片描述

    页面中表单里面的效果
    在这里插入图片描述

    二,把图片在表单显示出来。
    思路:首先触发一个文件选择器,当文件选择器change事件当数据发生改变时,就把读取到的文件获取出来变成file对象,在把file对象交给FileReader文件读取器。当文件读取器读取完后触发onload 的回调事件,并且会返回回调结果。
    (1)通过双击打开文件选择器选择需要上传的图片(主要目的:触发文件选择器)。
    //双击弹出文件选择框选择图片
    $("#studentPicture").dblclick(function () {
    //手动通过代码触发(upImage)点击事件
    $("#upImage").click();
    });
    (2)完成这步可以双击打开文件选择器,但是选择到的图片还是无法显示,但已经绑定到图片框。然后就要使用一个方法文件读取器(FileReader),调用它的onload事件。
    //文件读取器读取到files文件交给了FileReader对象(imgReader )
    var imgReader = new FileReader();
    //调用它的onload 事件信息。文件读取器取到文件后的回调事件
    imgReader.onload = function (event) {
    //显示图片
    $("#studentPicture").attr(“src”, event.target.result);
    }
    (3)读取upImage文件,change事件当数据发生改变时先获取它的文件出来,把获取到的文件变成file 对象,在把对象交给上步的文件读取器。
    $("#upImage").change(function () {
    //获取出文件选择器的第一个文件
    var file = $("#upImage").get(0).files[0];//get是获取dom对象
    //读取文件转化成URL
    imgReader.readAsDataURL(file);
    });
    代码图:
    在这里插入图片描述

    展开全文
  • 后拉发现我不限制上传图片的限制,只要上传图片成功后,就把之前的图片给删除就可以,此操作可以在on-success里面进行操作,代码 handleSucess(response, file, fileList){ console.log(response) console....
    <el-upload
         class="upload-demo"
         accept="image/jpeg,image/jpg,image/png"
         name="img"
         ref="img"
         action="/help/upload"
         :file-list="fileList"
         :on-error="handleError"
         :on-success="handleSucess"
         list-type="picture">
         <el-button size="small" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    </el-upload>

    效果图如下:

    accept:
    此参数是只接受上传文件的类型,因为我只上传图片,所以我支持了几种常见图片的格式

    name:
    此name的值将是upload组件渲染出input中type=file的name的值,这个值应该会和后端事先定义好
    即<input type="file" name="img" accept="image/jpeg,image/jpg,image/png" class="el-upload__input">

    ref:
    这个值我是方便以后获取upload组件渲染后的img的src的,后面会出示代码

    this.$nextTick(()=>{
                        const imgs = this.$refs.img.$el.childNodes[2].getElementsByTagName('img')[0]
                        imgs.setAttribute("src",res.rows[0].imgName)
                        this.$refs.img.$el.style.pointerEvents = 'none'
    })

    上传成功后,关闭弹框,重新打开我的弹框,我发现我的图片src没有,因为此时我没有拿到他的src,所以我通过上面的方法实现了。之后我发现我去点upload组件渲染后那个区域,图片的src就会没了,导致我图片无法显示,所以我将那块区域添加style="pointer-events",此时我就无法点击那个区域了。但此时你上传打开弹框时,要将这个syle去掉。

    action:
    这个是图片上传的服务器的地址,必填字段

    :file-list
    这个是上传图片的信息,我们可以把上传成功后图片的src和name存进去,类型是数组
     

    :on-success/:on-error
    分别是图片上传成功/失败绑定的函数,在函数里面我们可以进行一些操作,我们可以拿到成功或者失败的的图片信息
     

    :on-remove
    移除上传文件时的钩子

    :on-exceed
    超出上传文件限制的钩子

    :limit
    这个参数之前我是加上去的,因为我的需求是只能上传一张图片,但是我发现限制一张图片,我重复上传,新上传的图片不会覆盖之前的图片,而且重新上传图片我去触发on-remove,on-exceed都没法删除之前的图片。后拉发现我不限制上传图片的限制,只要上传图片成功后,就把之前的图片给删除就可以,此操作可以在on-success里面进行操作,代码

    handleSucess(response, file, fileList){
                console.log(response)
                console.log(fileList[0])
                console.log(file)
                if(fileList.length>1){
                    fileList.shift()
                    fileList.length = 1
                    this.form.imgName = response;
                }
    }

    上传成功后,会将成功后的信息返回给你,response是我当前上传成功图片的src,file是我当前上传成功图片的所有信息,fileList是我所有上传图片的信息集合。我只要判断我这个数组大于1,那么我把这个数组里面的前一个给删掉,但是shift()操作不改变数组的长度,所以再将length置为1即可。

    希望发现更好的解决方案的,可以告诉我~~~~~~

    展开全文
  • SSM实现表单图片文件上传显示

    千次阅读 2020-03-31 12:31:23
    很多时候都知道上传的原理,但是上传过程中总会有不少的问题,今天我对文件上传显示做了一下总结,直接看代码如下(有任何问题都可以联系我,随时都可以解答,大家一起探索Java的魅力,扯远了。。。) ssm的整合...
  • php 实现图片上传 图片显示详解

    千次阅读 2019-12-09 15:16:08
    首先要创建一个SQL表 将到时候上传图片保存到数据库中 其中的img字段存放的就是我们上传图片URL(其他的不重要) 静态页面选择图片的html <div class="control-group span3"> <label class="control...
  • 表单上传图片实现选择图片后预览

    千次阅读 2019-02-01 23:19:04
    写在前边 现在的时间:2019-2-1 如题,想实现这样一个功能,但我的前端是个菜鸟中菜鸟,这个例子是我查阅了好多资料与博客后...未选择图片 选择图片 代码 新建一个文本文件,把扩展名改成.html,把下边这...
  • 本次使用elementui的上传图片控件的照片墙类型,其使用示例可具体查看官方文档 Elementui 多图上传控件 需要注意的是,官方文档中的示例采用自动上传的方式,大多数情况我们是需要点击上传按钮或和表单一起提交才...
  • 本文实例为大家分享了PHP AjaxForm提交图片上传显示图片的具体代码,供大家参考,具体内容如下 PHP dofile.php 文件上传源码 <?php $file_upload = "upload/"; $file_allow_ext='gif|jpg|jpeg|png|gif|zip|rar...
  • 自定义form表单上传图片上一篇章Django 2.1.7 上传图片 - Admin后台管理说明了使用admin后台上传图片,本篇继续来看看如何自定义上传图片。1)打开assetinf...
  • layui通过表单上传图片: 项目场景:项目练习时候遇到一个问题,在使用layui框架时在表单提交图片时遇到的问题。 思路: 因为表单的数据要提交到数据库中就需要考虑图片在数据库中的方式。 有两种存取方式: 把...
  • 主要为大家详细介绍了iview实现图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 如何实现上传图片显示图片

    万次阅读 2019-05-16 17:46:13
    如何实现上传图片显示图片? 平时在注册或者填写完整个人信息的时候都会遇见上传个人图片的情况,那么你有没有想过这个该如何实现的呢?在以前还没有学到这个知识之前,就觉得好神奇,在网上居然能做到上传图片的...
  • img标签总是被识别成图片,所以放张图片。 img标签中绑定id,在图片id基础上再加一个logo,以避免id为纯数字。 <Table stripe border :columns="loginLog_columns" :data="tableData"> <template ...
  • html上传图片后,在页面显示上传的图片

    万次阅读 多人点赞 2017-12-02 11:38:16
    html上传图片后,在页面显示上传的图片1、html &lt;form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form"&gt; &...
  • retrofit post请求上传表单和文件最重要的就是就是去构建RequestBody,今天为大家带来一种超级简单的上传方式 Body方式: 1、Retrofit接口RetrofitInterface @POST(URLConstant.URL_PATH) Flowable...
  • <input id="hidupload" onchange="upchange()" style="display:none;"/> <button onclick="hideup()">上传文件</button> <img id="hidimg" src=""/> <button onclick=...
  • 在项目中经常会遇到图片上传功能,今天脚本之家小编给大家带来了使用Vue实现图片上传的三种方式,感兴趣的朋友一起看看吧
  • 关于前端上传图片应该很普遍,我分享下我常用的两种图片上传方式 1.base64
  • 通过html文件提交表单上传图片,并在flask后台进行获取和保存,以便后需
  • 有的弹框不能用,如果有发现问题的,私聊我哦,我万分感谢!
  • antd+node.js实现图片上传图片表单同提交) 1、 前端实现 import React from 'react'; import { connect } from 'react-redux'; import { RightCircleOutlined, UploadOutlined } from '@ant-design/icons'; ...
  • 最近在做一个项目时,遇到一个之前没接触过的问题,那就是如标题所述,关于图片文件上传已经附带form表单数据至数据库中,并可以在页面进行访问。 首先要搭建好ssm框架,这个我就不在详细描述了。 其次是,要想访问...
  • Vue实现表单上传图片,不多BB直接上效果图! PC端实现效果: 手机端效果: 前言:非专业前端,写的界面比较丑。大家大致看看就行。因为公司新项目需要做一个新平台。小公司人力有限,在云端界面功能开发又再一次...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,615
精华内容 20,646
关键字:

表单上传图片显示图片