Maison > Article > interface Web > Plug-in js de téléchargement par lots d'images imgFileupload.js
Plug-in js de téléchargement par lots d'images imgFileupload.js
- angryTomavant
- 2019-11-30 15:01:282986parcourir
Affichage de démonstration du plug-in
Plug-in introduction de la fonction
1. Sélectionnez les images par lots et limitez le type d'images (en limitant l'acceptation du fichier. Seules les images peuvent être sélectionnées
Par défaut : accept="image/). gif,image/jpeg,image/ jpg,image/png,image/svg"
2. Vous pouvez personnaliser la limite du nombre d'images sélectionnées, la valeur par défaut est 5
3. Vous pouvez personnaliser la largeur et la hauteur maximales de l'image, la valeur par défaut est de 10 000 px
4. Vous pouvez personnaliser la taille du fichier unique de l'image, la valeur par défaut est de 4 Mo
Tutoriel vidéo JavaScript]
Démo de code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>轻量级图片批量上传JS插件imgFileupload</title>
<meta charset="utf-8" />
<link href="Content/css/imgFileupload.css" rel="stylesheet" />
<script src="Content/js/jquery-1.8.3.min.js"></script>
<script src="Content/js/imgFileupload.js"></script>
</head>
<body>
<!--这里加载上传图片插件-->
<div class="review_img">
</div>
<input id="parameter1" type="text" value="" /><br />
<input id="parameter2" type="text" value="" /><br />
<input id="parameter3" type="text" value="" /><br />
<input id="parameter4" type="text" value="" /><br />
<input id="parameter5" type="text" value="" /><br />
<input type="button" id="sub" value="提交" οnclick="submit()">
</body>
</html>
<script type="text/javascript">
var imgFile;
$(function () {
imgFile = new ImgUploadeFiles('.review_img', function (e) {
this.init({
MAX: 6, //Limit the number of images
FileSize: 1024 * 1024 * 4,//单文件限制4MB(注意：单位KB)
callback: function (arr) {
console.log(arr)
}
});
});
});
function submit()
{
var formData = new FormData();
$(".review_img li").each(function (i, item) {
formData.append("file", $(item).data("file"));
});
formData.append("parameter1", $("#parameter1").val());
formData.append("parameter2", $("#parameter2").val());
formData.append("parameter3", $("#parameter3").val());
formData.append("parameter4", $("#parameter4").val());
formData.append("parameter5", $("#parameter5").val());
$.ajax({
url: "/Index/Write",
type: "POST",
dataType: "json",
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
},
success: function (data) {
alert("ok");
},
error: function () {
alert("Sorry");
}
});
}
</script>Lorsqu'un fichier est sélectionné plusieurs fois, le contenu des données de fichier dans l'élément File est toujours le fichier actuellement sélectionné et le dernier fichier sélectionné est remplacéEt en raison de problèmes de sécurité du navigateur, JavaScript ne peut pas exploiter les fichiers dans les données de fichier lors du téléchargement du fichier. Il ne peut pas attribuer plusieurs fichiers sélectionnés aux données de fichier du fichier. Élément File. Par conséquent, il est impossible de soumettre directement l'élément File à l'aide du formulaire de formulaire. Fichiers dans Nous utilisons donc ici formData pour soumettre des fichiers et des paramètres sans utiliser la soumission de formulaire . Cet article provient de la rubrique
tutoriel js, bienvenue pour apprendre !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!