이미지 일괄 업로드 js 플러그인 imgFileupload.js
- angryTom앞으로
- 2019-11-30 15:01:283073검색
플러그인 데모 디스플레이
# 🎜🎜 #
플러그인 기능 소개
1 사진을 일괄 선택하고 사진 유형을 제한합니다(파일 허용 제한). 사진만 선택하세요Default: accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"2 사용자 정의할 수 있습니다. 선택한 사진 수는 5장입니다. Zhang3. 이미지의 최대 너비와 높이를 맞춤 설정할 수 있습니다. 기본값은 10000px
4입니다. . 이미지의 단일 파일 크기를 사용자 정의할 수 있습니다. 기본값은 4MB입니다.
5. 간단한 참조 CSS 및 js를 사용하고
을 사용할 수 있습니다. [관련 강좌 추천: JavaScript 비디오 튜토리얼
]<!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>파일을 여러 번 선택하면 File 요소의 파일 데이터 콘텐츠는 항상 현재 선택한 파일이며 마지막으로 선택한 파일이 대체됩니다. #🎜 🎜#그리고 브라우저 보안 문제로 인해 JavaScript는 File 파일 업로드 시 파일 데이터에 있는 파일을 작동할 수 없으며, 선택한 여러 파일을 File 요소의 파일 데이터에 할당할 수 없습니다. 양식 form을 사용하여 File 요소에 파일을 직접 제출 그래서 여기서는 formData를 사용하여 양식 양식 제출을 사용하지 않고 파일과 매개변수를 제출합니다.
이 기사는 #🎜에서 가져온 것입니다. 🎜#js tutorial
칼럼, 학습에 오신 것을 환영합니다!위 내용은 이미지 일괄 업로드 js 플러그인 imgFileupload.js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제