<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>php jquery uploadify多文件上傳</title>
<link href=”css/default.css” rel=”stylesheet” type=”text/css” />
<link href=”css/uploadify.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/swfobject.js”></script>
<script type=”text/javascript” src=”js/jquery.uploadify.v2.1.0.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#fileInput2″).uploadify({
‘uploader': ‘js/uploadify.swf',//所需要的flash文件
‘cancelImg': ‘cancel.png',//單個取消上傳的圖片
'script': ‘js/uploadify.php',//實現(xiàn)上傳的程序
‘folder': ‘uploads',//服務端的上傳目錄
//'auto': true,//自動上傳
‘multi': true,//是否多文件上傳
//'checkScript': ‘js/check.php',//驗證 ，服務端的
‘displayData': 'speed',//進度條的顯示方式
//'fileDesc': ‘Image(*.jpg;*.gif;*.png)',//對話框的文件類型描述
//'fileExt': ‘*.jpg;*.jpeg;*.gif;*.png',//可上傳的文件類型
//'sizeLimit': 999999 ,//限制上傳文件的大小
//'simUploadLimit' :3, //并發(fā)上傳數(shù)據(jù)
//'queueSizeLimit' :5, //可上傳的文件個數(shù)
//'buttonText' :'文件上傳',//通過文字替換鈕扣上的文字
‘buttonImg': ‘css/images/browseBtn.png',//替換上傳鈕扣
‘width': 80,//buttonImg的大小
‘height': 24,//
‘rollover': true,//button是否變換
onComplete: function (evt, queueID, fileObj, response, data) {
//alert(“Successfully uploaded: “+fileObj.filePath);
//alert(response);
getResult(response);//獲得上傳的文件路徑
}
//onError: function(errorObj) {
// alert(errorObj.info+” “+errorObj.type);
//}
});
});
</script>
<script type=”text/javascript”>
function getResult(content){
//通過上傳的圖片來動態(tài)生成text來保存路徑
var board = document.getElementById(“divTxt”);
board.style.display=””;
var newInput = document.createElement(“input”);
newInput.type = “text”;
newInput.size = “45″;
newInput.name=”myFilePath[]“;
var obj = board.appendChild(newInput);
var br= document.createElement(“br”);
board.appendChild(br);
obj.value=content;
}
</script>
</head>
<body>
<fieldset style=”border: 1px solid #CDCDCD; padding: 8px; padding-bottom:0px; margin: 8px 0″>
<legend> <strong> 多文件上傳</strong></legend>
<div>
<input id=”fileInput2″ name=”fileInput2″ type=”file” />
<input type=”button” value=”確定上傳” onclick=”javascript:$(‘#fileInput2′).uploadifyUpload();”>&nbsp;&nbsp;
||&nbsp;&nbsp;<a href=”javascript:$(‘#fileInput2′).uploadifyClearQueue();”>清除上傳列表</a></div>
<p></p>
</fieldset>
<FORM name=”form2″ METHOD=POST ACTION=”db.php”>
 <div id=”divTxt” style=”display:none”><span style=”color:red”><strong>已經(jīng)上傳的圖片有：</strong></span& gt;<br></div><br>
<INPUT TYPE=”submit” value=”提 交”>
</FORM>
</body>
</html>

ps：uploadify插件實現(xiàn)多個圖片上傳并預覽

使用uploadify插件可方便實現(xiàn)圖片上傳功能。兼容ie6、ie7。

上傳成功之后使用插件的回調(diào)函數(shù)讀取json數(shù)據(jù)，根據(jù)url實現(xiàn)圖片預覽。

效果圖：

圖片上傳預覽效果圖

點擊瀏覽文件上傳圖片，圖片依次在右側(cè)顯示預覽效果。

實現(xiàn)：

json數(shù)據(jù)格式如下：

json數(shù)據(jù)

頁面代碼如下：

注：需要引用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,                                   //上傳最多圖片張數(shù)
    'removeTimeout' : 1,
    'preventCaching': true,                              //不允許緩存
    'fileSizeLimit' : 4100,                               //文件最大
    'formData'   : { '<?php echosession_name();?>' : '<?php echosession_id();?>','hash':$("#hash").val() }      //hash
  });
  $("#SWFUpload_0").css({         //設置按鈕樣式，根據(jù)插件文檔進行修改
            'position' :'absolute',
            'top': 20,
            'left': 35,
            'z-index' : 1
          });
});
</script>
</body>
</html>

曾遇到問題：

ie、360瀏覽器中對json數(shù)據(jù)檢查比較嚴格，不允許最后一個“，”存在。其它瀏覽器不會報錯，需要注意。

您可能感興趣的文章: