JQuery上传图片到服务器并预览

说明：

多张图片同时上传到服务器，并在前端页面显示预览。

CSS和JS

Common.css

* {

box-sizing: border-box;

-moz-box-sizing: border-box;

/*Firefox*/

-webkit-box-sizing: border-box;

/*Safari*/

}

.up-section.type-upimg{

display: none;

}

::-ms-clear,::-ms-reveal{display:none;}

textarea{

outline: none;

line-height: 14px;

padding-left: 4px;

padding-top: 4px;

border: 1px solid#ccc;

color: #444;

font-size: 14px;

outline: none;

text-align: left;

}

.overflow{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

button{

outline: none;

border: 0px;

font-family: "微软雅黑", "PingFang SC", "arial, helvetica, sans-serif"; }

input{

font-family: "微软雅黑", "PingFang SC", "arial, helvetica, sans-serif";

outline: none;

}

a {

outline: none;

}

a,button{cursor:pointer;}

body {

background: #f4f4f4;

font-size: 14px;

font-family: "微软雅黑", "PingFang SC", "arial, helvetica, sans-serif"; }

.clear {

clear: both;

}

.full{

width: 1210px;

min-width: 1210px;

margin: 0auto;

}

.full-big{

width: 1340px;

min-width: 1340px;

margin: 0auto;

}

.img-full{

display: block;

width: 100%;

}

::-webkit-input-placeholder {

color: #777;

font-size: 14px;

}

:-moz-placeholder {

/*Firefox 18-*/

color: #777;

font-size: 14px;

}

::-moz-placeholder {

/*Firefox 19+*/

color: #777;

font-size: 14px;

}

:-ms-input-placeholder {

color:#777;

font-size: 14px;

}

/*====clear float======*/

/*nav a:visited{color: rgb(65,65,65);} aside a:visited{color: rgb(65,65,65);}*/ .fl {

float: left;

}

.fr {

float: right;

}

.clear:after {

content: '';

display: block;

clear: both;

}

/*reset*/

.pic img{display: none;}

i,

p,

h1,

h2,

h3,

h4,

h5,

h6,

hr,

br,

em,

dl,

dd,

li,

ul,

ol,

td,

th,

pre,

form,

body,

input,

strong,

textarea,

select,figcaption,figure{

margin: 0;

padding: 0;

}

em {

font-style: normal

}

li {

list-style: none

}

a {

text-decoration: none;

}

img {

border: none;

}

table {

border-collapse: collapse; }

textarea {

resize: none;

overflow: auto;

}

a,button{cursor:pointer;}

index.css

/*上传图片插件的样式*/

.img-box{

margin-top: 40px;

}

.img-box.up-p{

margin-bottom: 20px;

font-size: 16px;

color: #555;

}

.z_photo{

padding: 18px;

border:2px dashed#E7E6E6;

/*padding: 18px;*/

}

.z_photo.z_file{

position: relative;

}

.z_file.file{

width: 100%;

height: 100%;

opacity: 0;

position: absolute;

top: 0px;

left: 0px;

z-index: 100;

}

.z_photo.up-section{

position: relative;

margin-right: 20px;

margin-bottom: 20px;

}

.up-section.close-upimg{

position: absolute;

top: 6px;

right: 8px;

display: none;

z-index: 10;

}

.up-section.up-span{

display: block;

width: 100%;

height: 100%;

visibility: hidden;

position: absolute;

top: 0px;

left: 0px;

z-index: 9;

background: rgba(0,0,0,.5); }

.up-section:hover{

border: 2px solid#f15134;

}

.up-section:hover.close-upimg{

display: block;

}

.up-section:hover.up-span{

visibility: visible;

}

.z_photo.up-img{

display: block;

width: 100%;

height: 100%;

}

.loading{

border: 1px solid#D1D1D1;

background:url(loading.gif)no-repeat center; }

.up-opcity{

opacity: 0;

}

.img-name-p{

display: none;

}

.upimg-div.up-section {

width: 190px;

height: 180px;

}

.img-box.upimg-div.z_file {

width: 190px;

height: 180px;

}

.z_file.add-img {

display: block;

width: 190px;

height: 180px;

}

/*遮罩层样式*/

.mask{

z-index: 1000;

display: none;

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

background: rgba(0,0,0,.4);

}

.mask.mask-content{

width: 500px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -250px;

margin-top: -80px;

background: white;

height: 160px;

text-align: center;

}

.mask.mask-content.del-p{

color: #555;

height: 94px;

line-height: 94px;

font-size: 18px;

border-bottom: 1px solid#D1D1D1; }

.mask-content.check-p{

height: 66px;

line-height: 66px;

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

}

.mask-content.check-p span{

width: 49%;

display:inline-block;

text-align: center;

color:#d4361d ;

font-size: 18px;

}

.check-p.del-com{

border-right: 1px solid#D1D1D1; }

jquery-1.8.3.min.js

自行百度

imgUp.js

$(function(){

var delParent;

var defaults = {

fileType : ["jpg","png","bmp","jpeg"], // 上传文件的类型

fileSize : 1024 * 1024 * 10 // 上传文件的大小 10M };

/*点击图片的文本框*/

$(".file").change(function(){

var idFile = $(this).attr("id");

var file = document.getElementById(idFile);

var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素

var fileList = file.files; //获取的图片文件

var input = $(this).parent();//文本框的父亲元素

var imgArr = [];

var formData = new FormData();

//遍历得到的图片文件

var numUp = imgContainer.find(".up-section").length;

var totalNum = numUp + fileList.length; //总的数量

if(fileList.length > 5 || totalNum > 5 ){

alert("上传图片数目不可以超过5个，请重新选择"); //一次选择上传超过5个或者是已经上传和这次上传的到的总数也不可以超过5个

}

else if(numUp < 5){

fileList = validateUp(fileList);

for (var i = 0; i < fileList.length; i++) {

formData.append("file" + i, fileList[i]); //将传入的图片push到空对象中

}

$.ajax({

type: "post",

url: "/Home/UploadImages", data: formData,

processData: false,

contentType: false,

success:function (result) {

if (result.d == "success") {

if (resNum == undefined || resNum == "") {

$.jBox.tip("添加成功", "success");

} else {

$.jBox.tip("编辑成功", "success");

}

UserMenu.PageClick(1);

return true;

} else {

if (resNum == undefined || resNum == "") { $.jBox.tip("添加失败", "error");

}

else {

$.jBox.tip("编辑失败", "error");

}

}

}

});

for(var i = 0;i

var imgUrl = window.URL.createObjectURL(fileList[i]);

imgArr.push(imgUrl);

var $section = $("

");

imgContainer.prepend($section);

var $span = $("");

$span.appendTo($section);

var $img0 = $("").on("click",function(event){ event.preventDefault();

event.stopPropagation();

$(".works-mask").show();

delParent = $(this).parent();

});

$img0.attr("src", "../Theme/css/UpImage/a7.png").appendTo($section);

var $img = $("");

$img.attr("src",imgArr[i]);

$img.appendTo($section);

var $p = $("

");

$p.html(fileList[i].name).appendTo($section);

var $input = $("");

$input.appendTo($section);

var $input2 = $("");

$input2.appendTo($section);

}

}

setTimeout(function(){

$(".up-section").removeClass("loading");

$(".up-img").removeClass("up-opcity");

},450);

numUp = imgContainer.find(".up-section").length;

if(numUp >= 5){

$(this).parent().hide();

}

});

$(".z_photo").delegate(".close-upimg","click",function(){

$(".works-mask").show();

delParent = $(this).parent();

});

$(".wsdel-ok").click(function(){

$(".works-mask").hide();

var numUp = delParent.siblings().length;

if(numUp < 6){

delParent.parent().find(".z_file").show();

}

delParent.remove();

});

$(".wsdel-no").click(function(){

$(".works-mask").hide();

});

function validateUp(files){

var arrFiles = [];//替换的文件数组

for(var i = 0, file; file = files[i]; i++){

//获取文件上传的后缀名

var newStr = https://www.360docs.net/doc/cd4282408.html,.split("").reverse().join("");

if(newStr.split(".")[0] != null){

var type = newStr.split(".")[0].split("").reverse().join("");

console.log(type+"===type===");

if(jQuery.inArray(type, defaults.fileType) > -1){

// 类型符合，可以上传

if (file.size >= defaults.fileSize) {

alert(file.size);

alert('您这个"'+ https://www.360docs.net/doc/cd4282408.html, +'"文件大小过大');

} else {

// 在这里需要判断当前所有文件中

arrFiles.push(file);

}

}else{

alert('您这个"'+ https://www.360docs.net/doc/cd4282408.html, +'"上传类型不符合');

}

}else{

alert('您这个"'+ https://www.360docs.net/doc/cd4282408.html, +'"没有类型, 无法识别');

}

}

return arrFiles;

}

})

Html

作品图片：最多可以上传5张图片，马上上传

value=""accept="image/jpg,image/jpeg,image/png,image/bmp"multiple/>

您确定要删除作品图片吗？

确定取消

a11.png

a7.png

上传到后台的Action（C#开发）

/Home/UploadImages

public ActionResult UploadImages()

{

JsonResult json = new JsonResult();

foreach (string file in Request.Files)

{

HttpPostedFileBase uploadFile = Request.Files[file] as HttpPostedFileBase;

if (uploadFile != null && uploadFile.ContentLength > 0)

{

if(!Directory.Exists(Server.MapPath("/Uploads/")))

{

Directory.CreateDirectory(Server.MapPath("/Uploads/")); }

var path = https://www.360docs.net/doc/cd4282408.html,bine(Server.MapPath("/Uploads/"), uploadFile.FileName);

uploadFile.SaveAs(path);

}

}

return json;

}

操作说明：

以上代码可以保存图片到服务器，只有上传，删除没做，其他可以自己扩展。

鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果

鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果 上一次在我的文库中分享了点击按钮，图片左右切换轮播效果代码，今天主要是分享【鼠标点击按钮，图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码】。 最后的效果如下： Html代码部分：

• 
• 
• 
• 
• 

• <
• >

Css代码部分： *{margin:0px;padding:0px}

JSP上传图片到数据库的例子

现在想写个程序 向数据库中插入图片路径(或则插入图片也可以) 最好是插入图片的路径这样可插入任意大的图片... 请高手指点一下思路.. 感激不尽 1.通过显示层向数据库中插入图片 2.在界面显示的时候是小图片(缩小过的) 3.当点击查看大图片会显示图片(原来的大小) 提供给你图片上传和显示的代码吧！希望对你有帮助 我在程序代码里贴了向Mysql数据库写入image代码的程序，可是好多人都是Java的初学者，对于这段代码，他们无法将它转换成jsp，所以我在这在写一下用jsp怎样向数据库写入图像文件。大家先在数据库建这样一张表，我下面的这些代码对任何数据库都通用，只要支持blob类型的 只要大家将连接数据库的参数改一下就可以了。 SQL> create table image(id int,content varchar(200),image blob); 如果在sqlserver2000的数据库中，可以将blob字段换为image类型，这在SqlServer2000中是新增的。 testimage.html文件内容如下：

我们在Form的action里定义了一个动作testimage.jsp，它的内容如下： <%@ page contentType= "text/html;charset=gb2312 "%> <%@ page import= "java.sql.* " %> <%@ page import= "java.util.* "%> <%@ page import= "java.text.* "%> <%@ page import= "java.io.* "%>

实验七：jQuery实现轮换广告

实验七jQuery实现轮换广告 一、实验目的 1. 掌握jQuery对象的获取及使用； 2. 掌握jQuery事件的使用； 3. 了解jQuery的用途。 二、实验内容 1. 使用jQuery实现图片的自动播放效果； 2. 使用jQuery实现点击导航播放相应的图片。 三、实验步骤 本实验使用到的相关样式设置代码提供如下： * { margin: 0; padding: 0; } body { font: 12px; padding-top: 50px; padding-right: 200px; padding-bottom: 100px; padding-left: 200px; } ul { list-style: none; } img { padding: 2px; border: 1px solid #eee; } #imgs { width: 410px; margin-right: auto; margin-left: auto; } .top, .btm { overflow: hidden; }

.top { background-position: 0 0; height: 5px; } .btm { height: 7px; } .mid { width: 400px; padding: 5px 7px 0; border: 1px solid #999; } .mid ul { width: 400px; height: 600px; background: #fff; position: relative; overflow: hidden; } .mid ul li { width: 400px; height: 600px; position: absolute; left: 490px; top: 0; } .mid ul li.first { left: 0; } #img_list { width: 486px; height: 20px; padding-top: 5px; overflow: hidden; height: 1%; } 图片及层布局参考代码如下：

用JSP实现个人网页中数据库图片的存储与显文献综述

新疆农业大学 专业文献综述 题目: 用JSP实现个人网页中数据库图片的存储与显 示 姓名: 刘王兵 学院: 计算机与信息工程学院 专业: 信息管理与信息系统 班级: 042 学号: 044631257 指导教师: 李萍职称:讲师 2007年12月10日 新疆农业大学教务处制

用JSP实现个人网页中数据库图片的存储与显示 作者：刘王兵指导教师：李萍 摘要：数据库应用程序，特别是基于WEB的数据库应用程序，常会涉及到图片信息的存储和显示。通常我们使用的方法是将所要显示的图片存在特定的目录下，在数据库中保存相应的图片的名称，在JSP中建立相应的数据源，利用数据库访问技术处理图片信息。但是，如果我们想动态的显示图片，上述方法就不能满足需要了。我们必须把图片存入数据库，然后通过编程动态地显示我们需要的图片。实际操作中，可以利用JSP的编程模式来实现图片的数据库存储和显示。 关键词：jsp；Web；个人网页；图片存储；图片显示； The Literature Summary of Making the Human Resources Homepage of the Class Student Liuwangbing Guide the teacher Liping Abstract:Along with the network technology development and the quantity of the network user increase, more and more people take own first choice way to seek employment on-line, meantime the enterprise also relies on the network to gather the talented person. This article through to analysis the human resources homepage, as well as introduction and analysis the current several kind of popular WEB development technology, to used https://www.360docs.net/doc/cd4282408.html, to description the function, which the human resources homepage have as well as realized. Key words:https://www.360docs.net/doc/cd4282408.html,；Web；Human Resources；Homepage Manufacture 前言：随着计算机互联网技术的飞速发展，WEB技术由原来的静态文档(纯HTML页面)发展到目前的多种web编程语言争夺互联网市场。页面内容由原来单一的文字发展到现在多媒体技术在网站开发中得到了充份利用。多媒体技术在网站开发中的应用是通过把文字、图片、视频、音频等元素巧妙的组合成为一个模块嵌入到网页当中。给浏览者以视觉、听觉的冲击，使以留下更加深刻的印像。而图片在网页当的作用想必仅次于文字，以成为页面当中不可缺少的一部分。大量的图片在网页当中被使用，开发人员从而不得不考虑其在服务器当中的存储及在页面当中更好的显示的问题。 正文： 1 网页当中图片存储与显示技术分析 1.1 图片的存储与在网页中的显示概况 JSP是目前使用十分广泛的网站开发技术，而图像是网站中不可缺少的一部分。在JSP 动态网站设计中，图像数据的处理一般有两种方式：一是对于相对较小的图像，可以用二进制流的方式直接保存到数据库表中，在需要时读出。对于大图像，这种方式读写数据占用的时间较长。但是对于相对较大的图像文件，把图像文件保存到一个文件夹中，文件名保存到数据表中，在需要时进行显示。本文通过个人网页方式讨论了在使用JSP开发动态网站过程中图像在数据库中的存储与显示的解决方案。 1.2 网页中图片的存储方式分类

Html网页显示js轮播图

Html网页显示js轮播图

• 
• 
• 
• 

.top-menu { height: 43px; margin-bottom: 2px;

jsp 图片上传功能实现原创

package com.lsl.util; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import javax.imageio.ImageIO; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGEncodeParam; import com.sun.image.codec.jpeg.JPEGImageEncoder; /** * * @author Administrator * 图像处理类 */ public class PicCompression { /** * 压缩图片方法 * * @param oldFile * 将要压缩的图片的绝对地址 * @param width * 压缩宽 * @param height * 压缩长 * @param quality * 压缩清晰度建议为1.0 * @param smallIcon * 压缩图片后,添加的扩展名 * @return */ public String zoom(String oldFile, int width, int height, float quality) { if (oldFile == null) { return null; } String newImage = null; try { File file = new File(oldFile);

Html、js图片轮播代码

Html、js图片轮播代码 现在基本上每个网站都有一个自动轮播的banner广告图，在没有任何按钮的情况下，图片在规定的时间内进行自动切换。下面是html、js 图片轮播代码详情。 代码效果图实例： 第一秒： 第二秒：

第三秒： 详细代码如下：Html代码部分：

• 
• 
• 

Css代码部分： Javascript代码部分：

• 1
• 2
• 3
• 4
• 5

java实现图片或文件的上传功能实现代码

java实现图片或文件的上传功能具体思路及代码 一、思路 文件是如何从本地发送到服务器的呢？ 首先，我们创建一个新的web工程，在工程的WebRoot目录下新建一个upload文件夹，这样当我们将该工程部署到服务器上时，服务器便也生成个upload文件夹，用来存放上传的资源。 然后，在WebRoot目录下新建一个jsp文件，主要实现的作用就是选择上传的文件，提交至servlet来进行处理 详细代码如下：一个form将文件信息通过post方式传送到指定的servlet 二、代码 复制代码代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> ">

请选择上传的图片或文件:

超级漂亮的jQuery焦点图广告轮播特效

超级漂亮的jQuery 焦点图广告轮播特效插件jCarousel 来源：原创 作者:JS 代码网 时间:2014-04-15 访问: 下载次数： 超级漂亮的jQuery 焦点图广告轮播特效插件jCarousel ，很棒的jQuery 插件，支持带缩略图左右切换， 支持Ajax 加载数据，响应式布局，支持移动端触屏，强大的API 参数配置功能以及函数回调功能，支 持自定义动画速度和动画模式，支持轮播方向定义，还是很不错的，推荐学习和使用。 使用方法： 1.加载jQuery 和插件 1 2 3 2.HTML 内容 01

02

03

04
• 
05
• 
06
• 
07
• 
08
• 
09
• 
10

11

12 ‹ 13 › 14

15

16

3.函数调用 view source

ssh框架中jsp上传图片功能的实现

jspsmart的使用 上传 // 新建一个SmartUpload对象 SmartUpload su = new SmartUpload(); // 上传初始化 su.initialize(pageContext); // 限制每个上传文件的最大长度。 su.setMaxFileSize(10000); // 限制总上传数据的长度。 su.setTotalMaxFileSize(20000); // 设定允许上传的文件（通过扩展名限制）,仅允许doc,txt文件。 su.setAllowedFilesList("doc,txt"); // 设定禁止上传的文件（通过扩展名限制）,禁止上传带有exe,bat, //jsp,htm,html扩展名的文件和没有扩展名的文件。 su.setDeniedFilesList("exe,bat,jsp,htm,html,,"); // 上传文件 su.upload(); // 将上传文件全部保存到指定目录 int count = su.save("/upload"); 下载 // 新建一个SmartUpload对象 SmartUpload su = new SmartUpload(); // 初始化 su.initialize(pageContext); // 设定contentDisposition为null以禁止浏览器自动打开文件， //保证点击链接后是下载文件。若不设定，则下载的文件扩展名为 //doc时，浏览器将自动用word打开它。扩展名为pdf时， //浏览器将用acrobat打开。 su.setContentDisposition(null); // 下载文件 su.downloadFile("/upload/test.doc"); 应用实例： uploadimage.jsp <%@ page contentType="text/html;charset=gb2312" language="java" import="java.io.*,java.awt.Image,java.awt.image.*,com.sun.image.codec.jpeg.*,java.sql.*,com.js psmart.upload.*,java.util.*"%> <%

java图片上传并预览,前台用jQuery插件AjaxFileUpload,后台用FileUtils.copyFile.

本文由我司收集整编，推荐下载，如有疑问，请与我司联系java 图片上传并预览，前台用jQuery 插件AjaxFileUpload，后台用 FileUtils.copyFile. 2015/01/05 0 个人笔记，以备后用. 表体代码： td colspan= 3 s:file label= 上传name= uploadFile id= uploadNumFile onchange= fileUpload( uploadNumFile , goodsRecordDtl_goodsPicture , goodsPicture_img ) / a href= # title= 查看quot;viewPic( viewPicture1 , goodsPicture , goodsRecordDtl_goodsPicture 查看图片/a div id= viewPicture1 title= 图片预览> img id= goodsPicture src= /div /td js 代码（记得要引入jquery 库和ajaxfileupload 库）： //上传文件id 号function fileUpload(uploadFileId,filePathId,imgId){ var imp= document.getElementById(uploadFileId); if(imp==null ||imp== ||imp== undefined){ alert( 请选择文件return; } $.ajaxFileUpload({ url:ct + uploadFile.do , secureuri:false, fileElementId:uploadFileId, dataType: multipart/form-data , success: function (data, status){ var json = eval( ( + data + ) if(json.msg== 1 ){ alert( 上传成功$( # +filePathId).val(json.path); $( # +imgId).attr( src ,eTrade.ctx+ /upload/ +json.path); }else{ alert( 文件上传失败} }, error: function (data, status, e){ alert(e); } }); } function viewPic(dialogId,imgId,fileId){ $( # +dialogId).dialog({ height: 350, width: 600, buttons: { 取消: function() { $( # +imgId).attr( src , $(this).dialog( close } }, close:function(){ $( # +imgId).attr( src , } }); if($( # +fileId).val()== ){ return; } $( # +imgId).attr( src ,ct+ /toView.do?attachment= +$( # +fileId).val()); } 后台代码（uploadFile 命名必须与前台name= uploadFile 一致）： private File uploadFile; public File getUploadFile() { return uploadFile; } public void setUploadFile(File uploadFile) { this.uploadFile = uploadFile; } @Action(value = uploadFile , results = { @Result(name = success , type = json , params = { ignoreHierarchy , false , contentType , text/html , root , dataMap }) }) public String

前端编程提高之旅 jQuery常见特效

前端编程提高之旅（二）----网站常见特效的jquery 实现 时间 2014-08-09 23:11:11 CSDN博客原 文https://www.360docs.net/doc/cd4282408.html,/yingyiledi/article/details/38460189 最好的编程语言是逻辑，前端各种交互特效的实现多可以用jquery实现，特效可以纷飞，内在逻辑则基本不变。这一篇文章主要介绍jquery实现常见特效背后的逻辑。 1.通过类名获取元素集合 首先来看一个js原生代码不支持的方法，通过类来获取元素集合。document.getElementsByClassName=function(classname){ var retnode = []; var myclass = new RegExp('\\b'+classname+'\\b');//匹配类名 var elem = this.getElementsByTagName('*');//得到所有元素 for (var j = 0; j < elem.length; j++) { var classes = elem[j].className; if (myclass.test(classes)){ retnode.push(elem[j]); } } return retnode; }//通过遍历整个文档元素类名，返回所有指定类名的数组

逻辑思路： 通过构造一个类名的正则表达式，选取所有标签，并通过正则表达式与所有标签类名属性进行匹配，从而返回一个类名数组，实现通过类名得到元素集合的目标。 实现这个方法的同时，也给在不使用jquery的情况下，选取特定序数的元素提供了便利。 2.二级联动菜单的构造 $("#select1").change( function() { //侦测一级菜单的change事件 var id = $("#select1").val(); if(id == 1){ //通过id判断二级菜单 $.get('index.php', null, function(data){ //get方式传值 $("span").empty(); //清空标签 $("span").append("济南青岛临沂"); //填充对应的二级菜单 }); }else{ $.get('index.php', null, function(data){ //get方式传值 $("span").empty(); //清空标签 $("span").append("郑州安阳洛阳"); //填充对应的二级菜单 }); } });