本文介绍了一种简单易懂的文件上传与图片展示方法，包括JavaScript代码实现、按钮样式设置、上传文件类型限制及成功上传后的图片显示与预览功能。
网上找了很久,终于找到个比较简单的用法,然后修改了一下
<script type="text/javascript">$(function() {
$("#file_upload_1")
.uploadify(
{
'buttonText' : '请选择12', //按钮显示的文字
height : 30,//按钮的高
width : 120,//按钮的长
swf : 'js/uploadify.swf',
uploader : 'uploadForm.html', //post请求的地址
'fileObjName' : 'file',//file对象的名字,相当于id="file"
'fileTypeExts' : '*.jpg; *.png; *.JPG ; *.PNG', //限定上传文件的类型
onUploadSuccess : function(file, data, response) {
var str = $('#divId').html();//.html()是用来读取元素的HTML内容（包括其Html标签）,如果只想显示一张的话,就不需要写这个了
var add = "<img src='"
+ "${pageContext.request.contextPath}/upload/"
+ file.name
+ "'"
+ " style='margin-left:15px;margin-top:15px' onclick='open1(this)'/></img>";
str += add;//把上次上传的html内容和这次的拼接在一起,也就是说把所有上传的图片都显示出来,如果只想显示一张的话,就不需要写这个了
$('#divId').html(str);//设置HTML内容
}
});
});
function open1(obj) {
// 点击图片,另开一个窗口察看
window.open($(obj).attr("src"), "_blank");
}
</script>
</head>
<body>
<div id="fileQueue"></div>
<input type="text" id="name1" name="name1" />
<input type="file" name="file_upload_1" id="file_upload_1"
class="uploadify" />
<div id="divId"></div>
</body>
扫一扫
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
