求：JS编写的上传多个图片并可以预览的代码
今天突然想起来这个题目，还挺好玩儿的，我非常喜欢qq空间的照片批量上传，非常方便快速，而且还有预览效果，但是那个是用flash实现的，提问能否用js来实现这个功能？希望大家共同探讨~
今天突然想起来这个题目，还挺好玩儿的，我非常喜欢qq空间的照片批量上传，非常方便快速，而且还有预览效果，但是那个是用flash实现的，提问能否用js来实现这个功能？希望大家共同探讨~
调试欢乐多
用flash在忍个 2年就是html5的天下了
2.动态生成HTML标签。
3.JS改变img属性src。
4.修饰样式成预览效果。
主界面图片列表添加图片编辑图片：提示信息：整合代码<!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>Web图片批量上传控件演示页面</title>
<script type="text/javascript" src="ImageUploader/ImageUploader.js" charset="utf-8"></script>
</head>
<body>
<div><a href="asp.net/images.aspx">查看上传的图片</a></div>
<div id="msg"></div>
<script language="javascript" type="text/javascript">
var imgUploader = new ImageUploader();
imgUploader.Config["PostUrl"] = "http://localhost/php/upload.php"; window.onload = function()
{
imgUploader.Init();
}
</script>
</body>
</html>
示例下载：
CAB安装包
ASP示例
ASP.NET示例
JSP示例
PHP示例
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <script type="text/javascript" src="js/myjs.js"></script> -->
<style type="text/css">
body {
font-family: "宋体", Arial, Helvetica, sans-serif;
font-size: 14px;
background: #fff;
color: #414141
}#tit {
margin: 10px 15px 20px 20px;
}#prev {
margin: 0px 0px 12px 0px;
}#btn {
padding: 2px 10px 2px 10px;
}input {
margin: 10px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="tit">
<h3>预览：</h3>
<img src="" alt="" id="prev" height="192" width="300" /> <form name="picForm" action="publishinfo/savepic.do"
enctype="multipart/form-data" method="post"
onsubmit="return checkpic();"> 图像1：<input type="file" id="carpoolpic1" name="carpoolpic1"
onchange="changesrc(this.id)" /> <input
type="radio" name="select" value="1" onclick="selected(this)">
<br> 图像2：<input type="file" id="carpoolpic2" name="carpoolpic2"
onchange="changesrc(this.id)" /> <input
type="radio" name="select" value="2" onclick="selected(this)">
<br> 图像3：<input type="file" id="carpoolpic3" name="carpoolpic3"
onchange="changesrc(this.id)" /> <input
type="radio" name="select" value="3" onclick="selected(this)"><br> 图像4：<input type="file" id="carpoolpic4" name="carpoolpic4"
onchange="changesrc(this.id)" /> <input
type="radio" name="select" value="4" onclick="selected(this)"><br>
<input type="submit" value="保存" id="btn" /> </form>
</div>
</body><script type="text/javascript">
function selected(obj) {
var str = "carpoolpic";
str = str + obj.value;
var imgSrc = document.getElementById(str).value;
if (imgSrc == "" || imgSrc == null) {
alert("此项没有图片");
obj.checked = false;
}
changesrc(str);
} var flag = true;
function changesrc(sender) {
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {//火狐下浏览
var imgSrc = document.getElementById(sender).value;
var t = document.getElementById(sender);
if (imgSrc == "") {
flag = false;
return false;
}
if (/(.*?)\.jpg$/.test(imgSrc.toLowerCase()) == false) {
document.getElementById(sender).value = "";
alert("只能选择jpg格式!");
flag = false;
return false; //如果不是jpg返回false
} else {
var imgs = document.createElement("img");
imgs.src = imgSrc; if (imgs.fileSize > 50 * 1024) {
alert("图片大小不能超过 50 KB!");
flag = false;
return false; //超过50K返回false
}
flag = true;
}
document.getElementById("prev").src = window.URL.createObjectURL(t.files[0]);
} else {//主要IE下
document.getElementById(sender).select();
var imgSrc = document.selection.createRange().text;
if (imgSrc == "") {
flag = false;
return false;
}
if (/(.*?)\.jpg$/.test(imgSrc.toLowerCase()) == false) {
document.getElementById(sender).value = "";
alert("只能选择jpg格式!");
flag = false;
return false; //如果不是JPG返回false
} else {
var imgs = document.createElement("img");
imgs.src = imgSrc;
flag = true;
}
document.getElementById("prev").src = imgSrc;
}
} function checkpic() {
var raFlag = false;
var obj = document.getElementsByName("select");
for ( var i = 0; i < obj.length; i++) {
if (obj[i].checked) {
raFlag = true;
break;
} else {
raFlag = false;
}
}
if (raFlag == false && flag == true) {
alert("请选择最新的照片");
}
var subFlag = false;
subFlage = flag && raFlag;
flag = false;
return subFlage;
}
</script>
</html>
以前写的不知道还能不能用了。