使用uploadify插件可方便實現圖片上傳功能。兼容ie6、ie7。
上傳成功之后使用插件的回調函數讀取json數據，根據url實現圖片預覽。
效果圖：
點擊瀏覽文件上傳圖片，圖片依次在右側顯示預覽效果。
實現：
json數據格式如下：
頁面代碼如下：
注：需要引用jQuery.js、uploadify.js、uploadify文件。。uploadify文件下載地址：http://www.uploadify.com/download/
<html>
<head>
<script type="text/javascript" src="static/js/jquery.js">"></script>
<script type="text/javascript" src="static/js/jquery.select.js">"></script>
</head>
<body>
<div class="file-box">
<div id="divPreview">
<span style="float:left">（最多可上傳五張圖片）</span>
</div>
<input type="file" name="file" class="file" id="fileField" />
<input type="hidden" name="hash" id="hash" value="xoxo"/>
</div>
<script>
$(function() {
$("#fileField").uploadify({
'height' : 30,
'swf' : '<?php echoYii::app()->request->baseUrl ?>/static/uploadify/uploadify.swf?var='+(newDate()).getTime(),
'uploader' :'index.php?r=upload/uploadimage',
'width' : 120,
'onUploadSuccess' : function(file, data, response) {
var info = eval("("+data+")");
if(info.err==1){alert(info.msg);} //如果圖片過大或者格式錯誤彈出錯誤信息
else{
$("#divPreview").append($("<img src='" + info.img + "'/>"));
$("#divPreview").append($("<input type='hidden' name='imgId[]' value='" + info.imgId + "'/>"));
}
},
'buttonText' : '瀏覽文件',
'uploadLimit' : 5, //上傳最多圖片張數
'removeTimeout' : 1,
'preventCaching': true, //不允許緩存
'fileSizeLimit' : 4100, //文件最大
'formData' : { '<?php echosession_name();?>' : '<?php echosession_id();?>','hash':$("#hash").val() } //hash
});
$("#SWFUpload_0").css({ //設置按鈕樣式，根據插件文檔進行修改
'position' :'absolute',
'top': 20,
'left': 35,
'z-index' : 1
});
});
</script>
</body>
</html>
曾遇到問題：
ie、360瀏覽器中對json數據檢查比較嚴格，不允許最后一個“，”存在。其它瀏覽器不會報錯，需要注意。