精华内容
下载资源
问答
  • 上传图片后直接显示的方法 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

    展开全文
  • 表单上传图片显示

    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>
    
    
    展开全文
  • 自定义form表单上传图片上一篇章Django 2.1.7 上传图片 - Admin后台管理说明了使用admin后台上传图片,本篇继续来看看如何自定义上传图片。1)打开assetinfo/views.py文件,创建视图pic_upload。def pic_upload...
    68e4386f530afd7ff4ebfb890fdb4fa2.png

    自定义form表单中上传图片

    上一篇章Django 2.1.7 上传图片 - Admin后台管理说明了使用admin后台上传图片,本篇继续来看看如何自定义上传图片。

    1)打开assetinfo/views.py文件,创建视图pic_upload。

    def pic_upload(request):
    return render(request,'assetinfo/pic_upload.html')

    2)打开assetinfo/urls.py文件,配置url。

    urlpatterns = [
    # ex:/assetinfo/pic_upload
    path('pic_upload', views.pic_upload, name='pic_upload'),
    ]

    3)在templates/assetinfo/目录下创建模板pic_upload.html。

    在模板中定义上传表单,要求如下:

    • form的属性enctype="multipart/form-data"
    • form的method为post
    • input的类型为file
    span style="color: #9B9B9B;line-height: 26px;">html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>自定义上传图片title>
    head>
    <body>
    <form method="post" action="/assetinfo/pic_handle/" enctype="multipart/form-data">
    {%csrf_token%}
    <input type="file" name="pic"/><br>
    <input type="submit" value="上传">
    form>
    body>
    html>

    4)打开assetinfo/views.py文件,创建视图pic_handle,用于接收表单保存图片。

    request对象的FILES属性用于接收请求的文件,包括图片。

    from django.conf import settings

    def pic_handle(request):
    f1=request.FILES.get('pic')
    fname='%s/assetinfo/%s'%(settings.MEDIA_ROOT,f1.name)
    with open(fname,'wb') as pic:
    for c in f1.chunks():
    pic.write(c)
    return HttpResponse('OK')

    5)打开assetinfo/urls.py文件,配置url。

    urlpatterns = [
    # ex:/assetinfo/pic_handle/
    path('pic_handle/', views.pic_handle, name='pic_handle'),
    ]

    6)运行服务器,在浏览器中输入如下网址:http://127.0.0.1:8000/assetinfo/pic_upload

    1d9f9f6801d2ac01e007cc1b62cca002.png

    选择文件后点击按钮上传图片。

    a6d6363ac2eb2b43c950ceb6cf9e3e42.png

    7)图片上传目录如下图:

    69a7ed95c10ef92db7ec9f795e5b0112.png

    这里只是完成图片上传的代码,如果需要保存数据到表中需要创建PicTest对象完成保存。

    8)打开assetinfo/views.py文件,修改视图pic_handle,将图片路径数据写入数据库。

    from django.conf import settings
    from assetinfo.models import PicTest

    def pic_handle(request):
    # 接收图片数据
    f1=request.FILES.get('pic')
    # 设置图片保存路径
    fname='%s/assetinfo/%s'%(settings.MEDIA_ROOT,f1.name)
    # 将图片写入保存路径
    with open(fname,'wb') as pic:
    for c in f1.chunks():
    pic.write(c)
    # 将图片数据写入数据库
    file = PicTest()
    file.pic = 'assetinfo/%s' % f1.name
    file.save()
    return HttpResponse('OK')

    9)进入mysql查询表数据如下:

    mysql> select * from assetinfo_pictest;
    +----+-----------------+
    | id | pic |
    +----+-----------------+
    | 3 | assetinfo/2.png |
    +----+-----------------+
    1 row in set (0.00 sec)

    mysql>

    显示图片

    1)打开assetinfo/views.py文件,创建视图pic_show。

    def pic_show(request):
    pic=PicTest.objects.get(pk=3)
    context={'pic':pic}
    return render(request,'assetinfo/pic_show.html',context)

    2)打开assetinfo/urls.py文件,配置url。

    urlpatterns = [
    # ex:/assetinfo/pic_show
    path('pic_show/', views.pic_show, name='pic_show'),
    ]

    3)在templates/assetinfo/目录下创建模板pic_show.html。

    span style="color: #9B9B9B;line-height: 26px;">html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>显示图片title>
    head>
    <body>
    <img src="/static/media/{{pic.pic}}"/>
    body>
    html>

    4)运行服务器,在浏览器中输入如下网址:http://127.0.0.1:8000/assetinfo/pic_show/

    bf1db0d04106a14064f1de0de9747016.png
    展开全文
  • 自定义form表单上传图片上一篇章Django 2.1.7 上传图片 - Admin后台管理说明了使用admin后台上传图片,本篇继续来看看如何自定义上传图片。1)打开assetinf...

    自定义form表单中上传图片

    上一篇章Django 2.1.7 上传图片 - Admin后台管理说明了使用admin后台上传图片,本篇继续来看看如何自定义上传图片。

    1)打开assetinfo/views.py文件,创建视图pic_upload。

    def pic_upload(request):
        return render(request,'assetinfo/pic_upload.html')
    

    2)打开assetinfo/urls.py文件,配置url。

    urlpatterns = [
        # ex:/assetinfo/pic_upload
        path('pic_upload', views.pic_upload, name='pic_upload'),
    ]
    

    3)在templates/assetinfo/目录下创建模板pic_upload.html。

    在模板中定义上传表单,要求如下:

    • form的属性enctype="multipart/form-data"

    • form的method为post

    • input的类型为file

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义上传图片</title>
    </head>
    <body>
        <form method="post" action="/assetinfo/pic_handle/" enctype="multipart/form-data">
            {%csrf_token%}
            <input type="file" name="pic"/><br>
            <input type="submit" value="上传">
        </form>
    </body>
    </html>
    

    4)打开assetinfo/views.py文件,创建视图pic_handle,用于接收表单保存图片。

    request对象的FILES属性用于接收请求的文件,包括图片。

    from django.conf import settings
    
    def pic_handle(request):
        f1=request.FILES.get('pic')
        fname='%s/assetinfo/%s'%(settings.MEDIA_ROOT,f1.name)
        with open(fname,'wb') as pic:
            for c in f1.chunks():
                pic.write(c)
        return HttpResponse('OK')
    

    5)打开assetinfo/urls.py文件,配置url。

    urlpatterns = [
        # ex:/assetinfo/pic_handle/
        path('pic_handle/', views.pic_handle, name='pic_handle'),
    ]
    

    6)运行服务器,在浏览器中输入如下网址:http://127.0.0.1:8000/assetinfo/pic_upload

    选择文件后点击按钮上传图片。

    7)图片上传目录如下图:

    这里只是完成图片上传的代码,如果需要保存数据到表中需要创建PicTest对象完成保存。

    8)打开assetinfo/views.py文件,修改视图pic_handle,将图片路径数据写入数据库。

    from django.conf import settings
    from assetinfo.models import PicTest
    
    def pic_handle(request):
        # 接收图片数据
        f1=request.FILES.get('pic')
        # 设置图片保存路径
        fname='%s/assetinfo/%s'%(settings.MEDIA_ROOT,f1.name)
        # 将图片写入保存路径
        with open(fname,'wb') as pic:
            for c in f1.chunks():
                pic.write(c)
        # 将图片数据写入数据库
        file = PicTest()
        file.pic = 'assetinfo/%s' % f1.name
        file.save()
        return HttpResponse('OK')
    

    9)进入mysql查询表数据如下:

    mysql> select * from assetinfo_pictest;
    +----+-----------------+
    | id | pic             |
    +----+-----------------+
    |  3 | assetinfo/2.png |
    +----+-----------------+
    1 row in set (0.00 sec)
    
    mysql>
    

    显示图片

    1)打开assetinfo/views.py文件,创建视图pic_show。

    def pic_show(request):
        pic=PicTest.objects.get(pk=3)
        context={'pic':pic}
        return render(request,'assetinfo/pic_show.html',context)
    

    2)打开assetinfo/urls.py文件,配置url。

    urlpatterns = [
        # ex:/assetinfo/pic_show
        path('pic_show/', views.pic_show, name='pic_show'),
    ]
    

    3)在templates/assetinfo/目录下创建模板pic_show.html。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>显示图片</title>
    </head>
    <body>
        <img src="/static/media/{{pic.pic}}"/>
    </body>
    </html>
    

    4)运行服务器,在浏览器中输入如下网址:http://127.0.0.1:8000/assetinfo/pic_show/

    展开全文
  • Django 2.1.7 Admin管理后台文章 Django 2.1.7 Admin管理后台 - 注册模型、自定义显示列表字段 Django 2.1.7 Admin - 列表页选项 Django 2.1.7 Admin - 编辑页选项...Django 2.1.7 上传图片 - Admin后台管理 自定义f...
  • Extjs 表单 显示图片 + 上传

    千次阅读 2013-02-20 08:58:39
    弄了一天的图片上传(也就是在表单里面显示图片,预览图片),显示,通过网上找资料终于弄好了。现在整理一下,贴到这,下次要再用到也方便查询了。。。  Java代码   //uploadFile.js     Ext....
  • 很多时候都知道上传的原理,但是上传过程中总会有不少的问题,今天我对文件上传显示做了一下总结,直接看代码如下(有任何问题都可以联系我,随时都可以解答,大家一起探索Java的魅力,扯远了。。。) ssm的整合...
  • SSH表单上传图片实例

    2017-09-07 02:31:37
    SSH框架的一个上传到服务器然后显示在页面上的小实例,用的是简单的form表单形式,数据包括图片的url地址保存在数据库中,图片上传到tomcat服务器下的项目文件夹里,然后页面展示图片, 算是好好把上传功能给过了一遍...
  • ajax formData上传文件、图片、表单信息 、图片显示 部分安卓微信浏览器无法触发change事件 所以移动端上传图片一定要加 accept=“image/*;” &amp;amp;lt;form id=&amp;quot;formData&amp;quot;&...
  • 后拉发现我不限制上传图片的限制,只要上传图片成功后,就把之前的图片给删除就可以,此操作可以在on-success里面进行操作,代码 handleSucess(response, file, fileList){ console.log(response) console....
  • img标签总是被识别成图片,所以放张图片。 img标签中绑定id,在图片id基础上再加一个logo,以避免id为纯数字。 <Table stripe border :columns="loginLog_columns" :data="tableData"> <template ...
  • form提交表单上传图片

    2014-06-25 17:24:00
    上传图片后将图片显示在当前页面上,本打算用ajax,但是上传图片必须设置enctype="multipart/form-data",而要提交之后页面不跳转,所以查资料后采用form+iframe的方式。空的iframe并且不显示,将form的target设置为...
  • 批量上传文件,input中增加multiple属性,即可上传多个文件 < input type = "file" multiple = "multiple" onchange = "checkinfo(this)" > < script > function checkinfo (obj) { var len = obj....
  • ios 表单上传图片和参数的2种方法

    千次阅读 2016-03-02 09:20:33
    iOS 表单上传图片和参数有2种方法 1. 在表单中添加待上传文件名和参数,利用formadd函数(如下代码) 2. 在表单中添加待上传文件名利用formadd函数,将参数直接拼接在url后面 说明,表单是http的头部分,不会显示...
  • 表单无刷新上传图片

    2017-11-07 14:18:00
    近期做有关上传图片的项目,发现都没有使用无刷新页面上传方式,都是通过传统的上传图片跳转然后显示图片,这对于上传多张图片就太不适用! 网上也有各种异步上传的插件 如 swfupload等比较庞大的插件,利用flash...
  • 在Zoho Creator中,每当往表单中添加新条目或者提交表单的时候,都会弹出一个窗口,显示消息为“成功添加数据”,这是您在Zoho Creator上创建的所有表单向所有用户显示的默认消息。但有时会觉得,只有文字弹出,会...
  • 参加网址... 只是upload_temp.html的内容,我新增加了显示上传图片的功能, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • SSH框架的一个上传到服务器然后显示在页面上的小实例,用的是简单的form表单形式,数据包括图片的url地址保存在数据库中,图片上传到tomcat服务器下的项目文件夹里,然后页面展示图片, 算是好好把上传功能给过了一遍...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 649
精华内容 259
热门标签
关键字:

表单上传图片显示图片