上传照片，并且马上能预览到缩略图，这用的是哪个js插件?

2023-03-04 17:38:01JavaScript011

上传照片，并且马上能预览到缩略图，这用的是哪个js插件?,第1张

无需插件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>By：DragonDean</title>

//下面用于图片上传预览功能

function setImagePreview(avalue) {

var docObj=document.getElementById("doc")

var imgObjPreview=document.getElementById("preview")

if(docObj.files &&docObj.files[0])

{

//火狐下，直接设img属性

imgObjPreview.style.display = 'block'

imgObjPreview.style.width = '150px'

imgObjPreview.style.height = '180px'

//imgObjPreview.src = docObj.files[0].getAsDataURL()

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

imgObjPreview.src = window.URL.createObjectURL(docObj.files[0])

}

else

{

//IE下，使用滤镜

docObj.select()

var imgSrc = document.selection.createRange().text

var localImagId = document.getElementById("localImag")

//必须设置初始大小

localImagId.style.width = "150px"

localImagId.style.height = "180px"

//图片异常的捕捉，防止用户修改后缀来伪造图片

try{

localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"

localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc

}

catch(e)

{

alert("您上传的图片格式不正确，请重新选择!")

return false

}

imgObjPreview.style.display = 'none'

document.selection.empty()

}

return true

}

</script>

</head>

<body>

<tbody>

<tr>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

一下好一款laydate.js日期时间选择插件，具有一定的参考价值，希望可以帮到你

日期时间选择插件laydate.js：

效果图：

1. 引入JS。

2. 根据需要做相应的配置。详情参看官网

laydate({

elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'

event: 'focus', //响应事件。如果没有传入event，则按照默认的click

format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月

festival: true, //显示节日

istime: true, //显示时间选项

choose: function(datas){ //选择日期完毕的回调

alert('得到：'+datas)

}

})

</script>

实例源码：

<!DOCTYPE html>

<html>

<head>

<!--

-->

<title>layDate日期时间选择插件</title>

</head>

<body>

Way1,

请选择日期:<input type="text" name="date" onclick="laydate()" />

<hr />

Way2,

laydate({

elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'

event: 'focus', //响应事件。如果没有传入event，则按照默认的click

format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月

festival: true, //显示节日

istime: true, //显示时间选项

choose: function(datas){ //选择日期完毕的回调

alert('得到：'+datas)

}

})

</script>

Way3,

</form>

</body>

</html>

一、Servlet实现文件上传，需要添加第三方提供的jar包

下载地址：

1) commons-fileupload-1.2.2-bin.zip: 点击打开链接

2) commons-io-2.3-bin.zip:点击打开链接

接着把这两个jar包放到 lib文件夹下：

二：文件上传的表单提交方式必须是POST方式，

编码类型：enctype="multipart/form-data"，默认是 application/x-www-form-urlencoded

比如：

三、举例：

1.fileupload.jsp

<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>

String path = requestgetContextPath()

String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">

<html>

<head>

<title>My JSP 'fileuploadjsp' starting page</title>

<!--

-->

</head>

<body>

用户名：<input type="text" name="usename"><br/>

上传文件：<input type="file" name="file1"><br/>

上传文件： <input type="file" name="file2"><br/>

</form>

</body>

</html>

2.实际处理文件上传的 FileUpLoad.java

package comservletfileupload

import javaioFile

import javaio*

import javaioIOException

import javaioPrintWriter

import javautilList

import javaxservletServletException

import javaxservlethttpHttpServlet

import javaxservlethttpHttpServletRequest

import javaxservlethttpHttpServletResponse

import orgapachecommonsfileuploadFileItem

import orgapachecommonsfileuploadFileUploadException

import orgapachecommonsfileuploaddiskDiskFileItemFactory

import orgapachecommonsfileuploadservletServletFileUpload

/**

* @author Administrator

* 文件上传

* 具体步骤：

* 1）获得磁盘文件条目工厂 DiskFileItemFactory 要导包

* 2）利用 request 获取真实路径，供临时文件存储，和最终文件存储，这两个存储位置可不同，也可相同

* 3）对 DiskFileItemFactory 对象设置一些属性

* 4）高水平的API文件上传处理 ServletFileUpload upload = new ServletFileUpload(factory)

* 目的是调用 parseRequest（request）方法获得 FileItem 集合list ，

* 5）在 FileItem 对象中获取信息，遍历，判断表单提交过来的信息是否是普通文本信息另做处理

* 6）

* 第一种用第三方提供的 itemwrite( new File(path,filename) )直接写到磁盘上

* 第二种手动处理

public class FileUpLoad extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

requestsetCharacterEncoding("utf-8")//设置编码

//获得磁盘文件条目工厂

DiskFileItemFactory factory = new DiskFileItemFactory()

//获取文件需要上传到的路径

String path = requestgetRealPath("/upload")

//如果没以下两行设置的话，上传大的文件会占用很多内存，

//设置暂时存放的存储室 , 这个存储室，可以和最终存储文件的目录不同

/**

* 原理它是先存到暂时存储室，然后在真正写到对应目录的硬盘上，

* 按理来说当上传一个文件时，其实是上传了两份，第一个是以 tem 格式的

* 然后再将其真正写到对应目录的硬盘上

factorysetRepository(new File(path))

//设置缓存的大小，当上传文件的容量超过该缓存时，直接放到暂时存储室

factorysetSizeThreshold(1024*1024)

//高水平的API文件上传处理

ServletFileUpload upload = new ServletFileUpload(factory)

try {

//可以上传多个文件

List<FileItem>list = (List<FileItem>)uploadparseRequest(request)

for(FileItem item : list)

{

//获取表单的属性名字

String name = itemgetFieldName()

//如果获取的表单信息是普通的文本信息

if(itemisFormField())

{

//获取用户具体输入的字符串，名字起得挺好，因为表单提交过来的是字符串类型的

String value = itemgetString()

requestsetAttribute(name, value)

}

//对传入的非简单的字符串进行处理，比如说二进制的图片，电影这些

else

{

/**

* 以下三步，主要获取上传文件的名字

//获取路径名

String value = itemgetName()

//索引到最后一个反斜杠

int start = valuelastIndexOf("\\")

//截取上传文件的字符串名字，加1是去掉反斜杠，

String filename = valuesubstring(start+1)

requestsetAttribute(name, filename)

//真正写到磁盘上

//它抛出的异常用exception 捕捉

//itemwrite( new File(path,filename) )//第三方提供的

//手动写的

OutputStream out = new FileOutputStream(new File(path,filename))

InputStream in = itemgetInputStream()

int length = 0

byte [] buf = new byte[1024]

Systemoutprintln("获取上传文件的总共的容量："+itemgetSize())

// inread(buf) 每次读到的数据存放在 buf 数组中

while( (length = inread(buf) ) != -1)

{

//在 buf 数组中取出数据写到（输出流）磁盘上

outwrite(buf, 0, length)

}

inclose()

outclose()

}

} catch (FileUploadException e) {

// TODO Auto-generated catch block

eprintStackTrace()

}

catch (Exception e) {

// TODO Auto-generated catch block

//eprintStackTrace()

}

requestgetRequestDispatcher("filedemojsp")forward(request, response)

}

System.out.println("获取上传文件的总共的容量："+item.getSize())

3.filedemo.jsp

<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>

String path = requestgetContextPath()

String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">

<html>

<head>

<title>My JSP 'filedemojsp' starting page</title>

<!--

-->

</head>

<body>

用户名：${requestScopeusename } <br/>

文件：${requestScopefile1 }<br/>

${requestScopefile2 }<br/>

</body>

</html>

4结果页面：

以上就是本文的全部

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：求JS显示24节气的完整代码

# 下一篇：golang爬虫框架colly

推荐阅读

热门文章

最新发布

标签列表

上传照片，并且马上能预览到缩略图，这用的是哪个js插件?

给您推荐相同类型的内容：