<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>原生JS实现图片上传预览效果完美兼容各浏览器</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="viewImage.js"></script>
<link rel="stylesheet" type="text/css" href="viewImage.css">
</head>
<body>
<table>
<tr>
<td style="width:100px">选择图片：</td>
<td>
<a href="javascript:void(0)" class="file" style="float:left;margin-right:10px">选择文件
<input class="file" type="file" name="filePath" id="preFilePath" required="true" onchange="loadImageFile(this,3)"/>
</a>
<a href="javascript:void(0)" class="file">清空图片
<input class="file" type="button" onclick="clearImages('preFilePath')"/>
</a>
</td>
</tr>
</table>
<table>
<tr>
<td style="width:100px">图片预览：</td>
<td style="height:200px">
<ul id="preFilePathView" class="imgShow">
</ul>
</td>
</tr>
</table>
<a href="javascript:void(0)" class="file">提交
<input id="submitImg" class="file" type="button"/>
</a>
</body>
<script type="text/javascript">
$(document).ready(function(){
//重置上传图片内容
formDataJson={};
//清除图片相关信息
clearImages('preFilePath');
//提交方法路径
var uploadUrl='rest/xxx/xxx';
$('#submitImg').click(function(){
submitFiles(uploadUrl,{},function(){
alert('提交成功！')
});
})
})
</script>
</html>
图片上传在线预览+图片提交
2星 需积分: 49 153 浏览量
2017-08-14
11:13:15
上传
评论 1
收藏 143KB RAR 举报 
上传图片预览提交.rar （45个子文件） 
上传图片预览提交 
ajaxfileupload.js 7KB viewImage.css 929B jquery.min.js 94KB viewImage.js 7KB layer skin default 
icon.png 11KB layer.css 14KB
loading-1.gif 701B .svn tmp props prop-base text-base props all-wcprops 960B entries 1KB prop-base icon.png.svn-base 53B loading-1.gif.svn-base 53B icon-ext.png.svn-base 53B loading-2.gif.svn-base 53B loading-0.gif.svn-base 53B text-base icon.png.svn-base 11KB loading-1.gif.svn-base 701B layer.css.svn-base 14KB icon-ext.png.svn-base 6KB loading-2.gif.svn-base 2KB loading-0.gif.svn-base 6KB loading-2.gif 2KB icon-ext.png 6KB loading-0.gif 6KB .svn tmp props prop-base text-base props all-wcprops 108B entries 290B prop-base text-base moon default.png 7KB .svn tmp props prop-base text-base props all-wcprops 383B entries 585B prop-base default.png.svn-base 53B text-base default.png.svn-base 7KB style.css.svn-base 3KB style.css 3KB .svn tmp props prop-base text-base props all-wcprops 224B entries 436B prop-base text-base layer.js.svn-base 21KB layer.js 21KB mobile .svn tmp props prop-base text-base props all-wcprops 238B entries 429B prop-base text-base layer.js.svn-base 3KB layer.js 3KB need layer.css 5KB .svn tmp props prop-base text-base props all-wcprops 250B entries 424B prop-base text-base layer.css.svn-base 5KB
上传图片预览.html 2KB
评论2