jsp页面 上传图片预览 的处理

简介: jsp页面 上传图片预览 的处理

页面:


<div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-md-10">
        <div id="imagepreview" class="col-md-5"></div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">概要图片(可选)</label>
    <div class="col-sm-10">
        <input id="img" type="file" name="file"/>
    </div>
</div>


页面预览方法:

 

<pre name="code" class="html">     //上传图片预览方法
      $('#img').change(function () {
         var file = this.files[0]; //选择上传的文件
        var r = new FileReader();
        r.readAsDataURL(file); //Base64
        $(r).load(function () {
           $('#imagepreview').html('<img src="' + this.result + '" width="100px" height="100px" alt="商品图片" />');
       });
 });
相关文章
|
1月前
|
自然语言处理 Java 数据库连接
掌握JSP页面编程:动态生成Web内容
【4月更文挑战第3天】Java Server Pages (JSP) 是一种用于创建动态Web内容的Java技术,它结合HTML并允许在页面中嵌入Java代码。JSP支持代码片段、表达式语言(EL)和JSTL标签库,简化动态内容生成。当服务器接收到请求时,执行JSP中的Java代码并将结果嵌入HTML返回给客户端。示例展示了如何显示当前日期和时间。JSP可与Servlet、JavaBeans、数据库等结合,用于构建功能丰富的交互式Web应用。
掌握JSP页面编程:动态生成Web内容
|
2月前
银行营业网点管理系统——修改的页面(updateBreaches.jsp)
银行营业网点管理系统——修改的页面(updateBreaches.jsp)
17 2
|
2月前
新闻发布项目——注册页面(reg.jsp)
新闻发布项目——注册页面(reg.jsp)
14 1
|
2月前
|
Java 数据库连接 mybatis
springboot访问jsp页面变成直接下载?
springboot访问jsp页面变成直接下载?
64 0
|
2月前
|
前端开发 Java
java实现动态验证码源代码——jsp页面
java实现动态验证码源代码——jsp页面
14 0
|
2月前
|
JavaScript 前端开发 Java
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
9 0
|
3月前
|
存储 缓存 Java
JSP页面生命周期详解及优化建议
JSP页面生命周期详解及优化建议
|
2月前
|
前端开发 Java
java通过commons-fileupload实现多张图片的上传(jsp页面)
java通过commons-fileupload实现多张图片的上传(jsp页面)
16 2
|
5月前
|
Java 应用服务中间件 容器
JSP页面请求响应过程中的编码解码
JSP页面请求响应过程中的编码解码
62 0
|
6月前
|
Java
jsp页面中显示word/excel文档方法
jsp页面中显示word/excel文档方法