您的位置：首页 > 其它

uploadify上传完图片后,显示预览图

2014-11-14 15:05 176 查看
网上找了很久,终于找到个比较简单的用法,然后修改了一下

<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航