近期在论坛中看到。在使用html5中上传图片或文件,出现各种问题。

这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下。如今的演示样例已经ok了,我就给大家分享一下,希望对大家有帮助。

好吧。我们先看看效果截图吧:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveG10YmxvZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" height="400" width="255" alt="">

还行吧,来看页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>伪专家jqm文件上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>伪专家jqm文件上传</h1>
</div>
<div class="ui-content">
<p><b>如有疑问:请加qq群135430763,共同学习! 。。</b></p>
<p><b>如有疑问:请加qq群135430763,共同学习! ! ! </b></p>
<div class="file-box">
<form action="FileServlet" method="post" enctype="multipart/form-data" data-ajax="false">
<input type="file" name="fileField" id="fileField" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
<p><b>如有疑问:请加qq群135430763。共同学习!!! </b></p>
<p><b>如有疑问:请加qq群135430763,共同学习。!! </b></p>
</div>
<div data-role="footer" data-position="fixed">
<h1>伪专家jqm文件上传</h1>
</div>
</div>
</body>
</html>

在看看简单的servlet代码:

package com.herman.jqm.servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
* @see 上传图片或文件FileServlet
* @author Administrator
* @date 2014年6月23日10:00:39
*/
public class FileServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* 默认构造函数
*/
public FileServlet() {
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
@SuppressWarnings("unchecked")
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setChara

jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo的更多相关文章

  1. js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)

    目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...

  2. [原创]java WEB学习笔记49:文件上传基础,基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  3. Spring MVC 文件上传、Restful、表单校验框架

    目录 文件上传 Restful Restful 简介 Rest 行为常用约定方式 Restful开发入门 表单校验框架 表单校验框架介绍 快速入门 多规则校验 嵌套校验 分组校验 综合案例 实用校验范 ...

  4. angularjs 文件上传 如何绑定file表单的change?

    ng-change 会失灵 , 唯一的解决方式 是 onchange="angular.element(this).scope().fileNameChanged()"然后利用 n ...

  5. 八 SpringMVC文件上传,必须设置表单提交为post

    1 修改Tomcat配置,本地目录映射 那么在server.xml中体现为: 测试一下是否设置成功: 2 引入jia包   3 配置多媒体解析器 3 jsp开启图片上传 4 Controller层设置 ...

  6. SmartUpload实现文件上传时file和表单文本同时提交的问题

    JSP页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...

  7. 项目总结07:JS图片的上传预览和表单提交(FileReader()方法)

    JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...

  8. MVC文件上传09-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹,并在其中创建分类子文件夹

    为用户创建专属上传文件夹后,如果想在其中再创建分类子文件夹,该怎么做?可以在提交文件的视图中再添加一个隐藏域,并设置 name="uploadContext". 相关兄弟篇: MV ...

  9. 本文档教授大家在yii2.0里实现文件上传 首先我们来实现单文件上传

    第一步  首先建立一个关于上传的model层  如果你有已经建好的可以使用表单小部件的model层 也可以直接用这个.在这里我们新建一个新的model层 在model层新建文件  Upload.php ...

随机推荐

  1. 1.ArcGis几何图形之几何计算

    /// <summary> /// 检测几何图形A是否包含几何图形B /// </summary> /// <param name="pGeometryA&qu ...

  2. 使用node成功安装完某插件typescript后,在使用时提示:tsc(或xxx)不是内部或外部命令,也不是可运行的程序或批处理文件

    具体出错情形: 使用npm安装typescript明明安装成功,但在使用时一直报错,报错语句为  tsc不是内部或外部命令,也不是可运行的程序或批处理文件 具体出错原因: node未正确安装,或相关环 ...

  3. RabbitMQ .NET消息队列使用入门(二)【多个队列间消息传输】

    孤独将会是人生中遇见的最大困难. 实体类: DocumentType.cs public enum DocumentType { //日志 Journal = 1, //论文 Thesis = 2, ...

  4. 解决无法移除tomcat中的项目

    问题:启动myeclipse,tomcat提示报错,blind,但是你移除的时候无法移除,只会显示一个黄色的感叹号,此时你直接在webapp中删除时,也提示呗占用无法删除. 办法:关掉myeclips ...

  5. more-less-cat-tail-head 命令简单分析

    区别:cat一次性把文件内容全部显示出来,管你看不看得清,显示完了cat命令就返回了,不能进行交互式 操作,适合察看内容短小.不超过一屏的文件:more比cat强大一点,支持分页显示,你可以ctrl+ ...

  6. EKF优化:协方差coff计算公式、意义、Code优化

    复习!复习! 原文链接:http://blog.csdn.net/goodshot/article/details/8611178 1.代码: Matlab相关系数的意义: Eigen::Matrix ...

  7. 在 ef 中执行 DbContext.Table.AddRange(Enitites).ToList() 会发生什么

    在 ef 中执行 DbContext.Table.AddRange(Enitites).ToList() 会发生什么 昨天和朋友摸鱼,无意之间聊到了执行 DbContext.Table.AddRang ...

  8. 备份-泛函编程(23)-泛函数据类型-Monad

    泛函编程(23)-泛函数据类型-Monad http://www.cnblogs.com/tiger-xc/p/4461807.html https://blog.csdn.net/samsai100 ...

  9. django分页功能,templatetags的应用

    django 将不会将得到的html代码自动转化 from django.utils.html import format_html html =''' <a href='http://www. ...

  10. 【udacity】机器学习-knn最近邻算法

    Evernote Export 1.基于实例的学习介绍 不同级别的学习,去除所有的数据点(xi​,yi​),然后放入一个数据库中,下次直接提取数据 但是这样的实现方法将不能进行泛化,这种方式只能简单的 ...