html5 图片上传范例详解

 html5 最新的拖拽上传 网上的例子也不少,但是本人没看到什么特别全面的,所以特地在这里把前台和后台代码全部贴上,望还没实现的人今早实现。
代码如下:

前台的jsp如下:

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我的webQQ</title>
<base href="<%=basePath%>"/>
<script type="text/javascript" src=\'#\'" /jquery-1.6.1.min.js"></script>
<script language="JavaScript" type="text/JavaScript">

$(function(){
  if (window.FileReader) { 
var file ;
        var list = document.getElementById('list'), 
            cnt = document.getElementById('container'),
            btn = document.getElementById("upLoadbtn");
 
        // 判断是否图片 
        function isImage(type) { 
            switch (type) { 
            case 'image/jpeg': 
            case 'image/png': 
            case 'image/gif': 
            case 'image/bmp': 
            case 'image/jpg': 
                return true; 
            default: 
                return false; 
            }  

你可能感兴趣的:(图片)