jQuery AjaxUpload télécharger l'image code_jquery

Cette fois, AJAXUPLOAD est utilisé comme plug-in de téléchargement sans balais du client de téléchargement. Sa dernière version est la 3.9. L'adresse officielle : http://valums.com/ajax-upload/
.

Introduisez jquery.min.1.4.2.js et ajaxupload.js
dans la page

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/ajaxupload3.9.js" type="text/javascript"></script>

Code HTML :

<style type="text/css">
#txtFileName {
width: 300px;
}
.btnsubmit{border-bottom: #cc4f00 1px solid; border-left: #ff9000 1px solid;border-top: #ff9000 1px solid; border-right: #cc4f00 1px solid;text-align: center; padding: 2px 10px; line-height: 16px; background: #e36b0f; height: 24px; color: #fff; font-size: 12px; cursor: pointer;}
</style>
上传图片：<input type="text" id="txtFileName" /><div id="btnUp" style="width:300px;" class=btnsubmit >浏览</div>
<div id="imglist"></div>

code js :

<script type="text/javascript">
$(function () {
var button = $('#btnUp'), interval;
new AjaxUpload(button, {
//action: 'upload-test.php',文件上传服务器端执行的地址
action: '/handler/AjaxuploadHandler.ashx',
name: 'myfile',
onSubmit: function (file, ext) {
if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
alert('图片格式不正确,请选择 jpg 格式的文件!', '系统提示');
return false;
}
// change button text, when user selects file
button.text('上传中');
// If you want to allow uploading only 1 file at time,
// you can disable upload button
this.disable();
// Uploding -> Uploading. -> Uploading...
interval = window.setInterval(function () {
var text = button.text();
if (text.length < 10) {
button.text(text + '|');
} else {
button.text('上传中');
}
}, 200);
},
onComplete: function (file, response) {
//file 本地文件名称，response 服务器端传回的信息
button.text('上传图片(只允许上传JPG格式的图片,大小不得大于150K)');
window.clearInterval(interval);
// enable upload button
this.enable();
var k = response.replace("<PRE>", "").replace("

", ""); if (k == '-1') { alert('您上传的文件太大啦!请不要超过150K'); } else { alert("服务器端传回的串："+k); alert("本地文件名称："+file); $("#txtFileName").val(k); $("").appendTo($('#imglist')).attr("src", k); } } }); });

Code ajaxuploadhandler.ashx côté serveur

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile postedFile = context.Request.Files[0];
string savePath = "/upload/images/";
int filelength = postedFile.ContentLength;
int fileSize = 163600; //150K
string fileName = "-1"; //返回的上传后的文件名
if (filelength <= fileSize)
{
byte[] buffer = new byte[filelength];
postedFile.InputStream.Read(buffer, 0, filelength);
fileName = UploadImage(buffer, savePath, "jpg");
}
context.Response.Write(fileName);
}
public static string UploadImage(byte[] imgBuffer, string uploadpath, string ext)
{
try
{
System.IO.MemoryStream m = new MemoryStream(imgBuffer);
if (!Directory.Exists(HttpContext.Current.Server.MapPath(uploadpath)))
Directory.CreateDirectory(HttpContext.Current.Server.MapPath(uploadpath));
string imgname = CreateIDCode() + "." + ext;
string _path = HttpContext.Current.Server.MapPath(uploadpath) + imgname;
Image img = Image.FromStream(m);
if (ext == "jpg")
img.Save(_path, System.Drawing.Imaging.ImageFormat.Jpeg);
else
img.Save(_path, System.Drawing.Imaging.ImageFormat.Gif);
m.Close();
return uploadpath + imgname;
}
catch (Exception ex)
{
return ex.Message;
}
}
public static string CreateIDCode()
{
DateTime Time1 = DateTime.Now.ToUniversalTime();
DateTime Time2 = Convert.ToDateTime("1970-01-01");
TimeSpan span = Time1 - Time2; //span就是两个日期之间的差额 
string t = span.TotalMilliseconds.ToString("0");
return t;
}

Dans le développement de sites Web PHP, la fonction de téléchargement de fichiers est souvent utilisée. J'ai déjà présenté comment utiliser PHP pour implémenter la fonction de téléchargement de fichiers. Avec le développement de la technologie WEB, l'expérience utilisateur est devenue la clé pour mesurer le succès d'un site Web. Aujourd'hui, je vais partager avec vous un exemple d'utilisation de Jquery pour implémenter la fonction de téléchargement de fichiers Ajax en PHP. est utilisé, qui peut implémenter une fonction de téléchargement de fichiers uniques et multiples.

AjaxUpload

Lorsque le plug-in Jquery AjaxUpload implémente la fonction de téléchargement de fichiers, il n'est pas nécessaire de créer un formulaire. Il peut réaliser le téléchargement de fichiers en mode Ajax. Bien sûr, vous pouvez également créer un formulaire selon vos besoins.

Préparation

1. Téléchargez le package de développement Jquery et le plug-in de téléchargement de fichiers AjaxUpload.

2. Créez uploadfile.html et introduisez le package de développement Jquery et le plug-in AjaxUpload

<script src="js/jquery-1.3.js"></script>
<script src="js/ajaxupload.3.5.js"></script> 

3. Selon les besoins du plug-in Jquery AjaxUpload, créez un DIV qui déclenche la fonction de téléchargement de fichiers Ajax

<ul> 
<li id="example"> 
<div id="upload_button">文件上传</div>
<p>已上传的文件列表:</p> 
<ol class="files"></ol>
</ul> 

Remarque : à partir du code ci-dessous, nous pouvons voir que le plug-in Jquery AjaxUpload déclenche la fonction de téléchargement de fichiers basée sur le DIV upload_button.

Code JS frontal

J'ai défini un commutateur dans le code pour qu'il corresponde au type de fichier téléchargé selon les besoins, et j'ai également défini s'il fallait télécharger un seul fichier ou plusieurs fichiers en mode Ajax.

$(document).ready(function(){
var button = $('#upload_button'), interval;
var fileType = "all",fileNum = "one"; 
new AjaxUpload(button,{
action: 'do/uploadfile.php',
/*data:{
'buttoninfo':button.text()
},*/
name: 'userfile',
onSubmit : function(file, ext){
if(fileType == "pic")
{
if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
this.setData({
'info': '文件类型为图片'
});
} else {
$('<li></li>').appendTo('#example .files').text('非图片类型文件，请重传');
return false; 
}
}
button.text('文件上传中');
if(fileNum == 'one')
this.disable();
interval = window.setInterval(function(){
var text = button.text();
if (text.length < 14){
button.text(text + '.'); 
} else {
button.text('文件上传中'); 
}
}, 200);
},
onComplete: function(file, response){
if(response != "success")
alert(response);
button.text('文件上传');
window.clearInterval(interval);
this.enable();
if(response == "success");
$('<li></li>').appendTo('#example .files').text(file); 
}
});
}); 

Remarque :

Ligne 1 : fonction $(document).ready(), une fonction dans Jquery, similaire à window.load Utilisez cette fonction pour appeler la fonction liée immédiatement lorsque le DOM est chargé et prêt à être lu et manipulé.

Ligne 3 : Les paramètres fileType et fileNum représentent le type et le nombre de fichiers téléchargés. La valeur par défaut est que tous les types de fichiers peuvent être téléchargés. Un seul fichier peut être téléchargé en même temps. fichiers ou plusieurs fichiers en même temps, vous pouvez Les valeurs de ces deux variables deviennent pic et plus.

Lignes 6 ~ 8 : POST des données sur le serveur. Vous pouvez définir des valeurs statiques ou obtenir des valeurs dynamiques via la fonction d'opération DOM de Jquery, comme la valeur d'INPUT dans le formulaire, etc.

Ligne 9 : Équivalent au frontend

<input type="file" name="userfile"> 

$_FILES['userfile'] côté serveur

Lignes 10~36 : Fonction déclenchée avant le téléchargement du fichier.

Lignes 11~21 : Fonction de filtrage du type de fichier image, la fonction Jquery setData est utilisée pour définir la valeur du POST sur le serveur.

Lignes 25 ~ 26 : définissez s'il faut télécharger un seul fichier ou plusieurs fichiers en même temps. Si un seul fichier est téléchargé, le bouton de déclenchement sera désactivé. Si vous souhaitez transférer plusieurs fichiers supplémentaires, veuillez définir la valeur de MAXSIZE dans le programme de téléchargement de fichiers PHP côté serveur. Bien entendu, la limite de taille des fichiers téléchargés est également liée aux paramètres du fichier PHP.INI.

Lignes 28 à 35 : pendant le processus de téléchargement de fichier, le texte du bouton est mis à jour dynamiquement toutes les 200 millisecondes, obtenant l'effet d'invites dynamiques. La fonction window.setInterval est utilisée pour exécuter la fonction intégrée à chaque heure spécifiée. L'unité de temps d'interaction est la milliseconde.

Lignes 37 à 49 : La fonction est déclenchée une fois la fonction de téléchargement de fichier terminée. Si le serveur signale une erreur en fonction de la valeur de retour, le frontal affiche le message d'erreur via ALERTE.

Code de téléchargement de fichiers PHP côté serveur

Il est généralement adapté du didacticiel d'exemple de code de fonction de téléchargement de fichier PHP présenté précédemment. Les paramètres de taille de téléchargement de fichier, les messages d'erreur et autres instructions impliqués ont été expliqués en détail dans cet article.

$upload_dir = '../file/';
$file_path = $upload_dir . $_FILES['userfile']['name'];
$MAX_SIZE = 20000000;
echo $_POST['buttoninfo'];
if(!is_dir($upload_dir))
{
if(!mkdir($upload_dir))
echo "文件上传目录不存在并且无法创建文件上传目录";
if(!chmod($upload_dir,0755))
echo "文件上传目录的权限无法设定为可读可写";
}
if($_FILES['userfile']['size']>$MAX_SIZE)
echo "上传的文件大小超过了规定大小";
if($_FILES['userfile']['size'] == 0)
echo "请选择上传的文件";
if(!move_uploaded_file( $_FILES['userfile']['tmp_name'], $file_path))
echo "复制文件失败，请重新上传"; 
switch($_FILES['userfile']['error'])
{
case 0:
echo "success" ;
break;
case 1:
echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值";
break;
case 2:
echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";
break;
case 3:
echo "文件只有部分被上传";
break;
case 4:
echo "没有文件被上传";
break;
}

Résumé

Fondamentalement, le prototype de la fonction de déclenchement de téléchargement de fichiers Ajax frontal et de la fonction de téléchargement de fichiers PHP côté serveur a été introduit. Vous pouvez compléter les codes front-end et back-end selon vos propres besoins, ou vous-même. peut séparer certaines fonctions, telles que le type de fichier, la fonction de téléchargement de fichiers uniques ou multiples. En général, il est relativement simple d'appliquer le plug-in Jquery AjaxUpload pour implémenter la fonction de téléchargement de fichiers.