recherche

Maison >interface Web >js tutoriel >uploadify réglage des paramètres de téléchargement multi-fichiers tips_jquery

uploadify réglage des paramètres de téléchargement multi-fichiers tips_jquery

WBOY
WBOYoriginal
2016-05-16 15:32:081963parcourir

Comparé à swfupload, le plug-in uploadify est plus simple à configurer et à utiliser, mais il est un peu plus lent pendant environ une seconde lors de son premier chargement.

Plus de bêtises, laissez-moi vous poster le code. 

<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',//实现上传的程序
‘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, //并发上传数据
//'queueSizeLimit' :5, //可上传的文件个数
//'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){
//通过上传的图片来动态生成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();”>  
||  <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>已经上传的图片有：</strong></span& gt;<br></div><br>
<INPUT TYPE=”submit” value=”提 交”>
</FORM>
</body>
</html>

ps : le plug-in uploadify permet de télécharger et de prévisualiser plusieurs images

Utilisez le plug-in uploadify pour implémenter facilement la fonction de téléchargement d'images. Compatible avec ie6 et ie7.

Une fois le téléchargement réussi, utilisez la fonction de rappel du plug-in pour lire les données json et prévisualiser l'image en fonction de l'URL.

Rendu :

uploadify réglage des paramètres de téléchargement multi-fichiers tips_jquery

Cliquez pour parcourir le fichier pour télécharger l'image, et l'effet d'aperçu de l'image sera affiché sur le côté droit.

Mise en œuvre :

Le format de données json est le suivant :

uploadify réglage des paramètres de téléchargement multi-fichiers tips_jquery

Le code de la page est le suivant :

Remarque : les fichiers jQuery.js, uploadify.js et uploadify doivent être cités. . Adresse de téléchargement du fichier 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'    : '<&#63;php echoYii::app()->request->baseUrl &#63;>/static/uploadify/uploadify.swf&#63;var='+(newDate()).getTime(),
    'uploader'   :'index.php&#63;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 + "'/ alt="uploadify réglage des paramètres de téléchargement multi-fichiers tips_jquery" >"));
      $("#divPreview").append($("<input type='hidden' name='imgId[]' value='" + info.imgId + "'/>"));
      }
    },
    'buttonText'  : '浏览文件',
    'uploadLimit'  : 5,                                   //上传最多图片张数
    'removeTimeout' : 1,
    'preventCaching': true,                              //不允许缓存
    'fileSizeLimit' : 4100,                               //文件最大
    'formData'   : { '<&#63;php echosession_name();&#63;>' : '<&#63;php echosession_id();&#63;>','hash':$("#hash").val() }      //hash
  });
  $("#SWFUpload_0").css({         //设置按钮样式，根据插件文档进行修改
            'position' :'absolute',
            'top': 20,
            'left': 35,
            'z-index' : 1
          });
});
</script>
</body>
</html>

Ai rencontré des problèmes :

Les navigateurs IE et 360 sont plus stricts en matière d'inspection des données json et n'autorisent pas l'existence du dernier ",". Les autres navigateurs ne signaleront pas d’erreur, alors soyez attentif.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'exemple de code jquery.slides.js_jqueryArticle suivant：Explication détaillée de l'exemple de code jquery.slides.js_jquery

Articles Liés

Voir plus