웹 프론트엔드 JS 튜토리얼 부트스트랩 기반 업로드 플러그인 파일 입력은 Ajax 비동기 업로드 기능을 구현합니다(다중 파일 업로드 미리보기 드래그 앤 드롭 지원).

부트스트랩 기반 업로드 플러그인 파일 입력은 Ajax 비동기 업로드 기능을 구현합니다(다중 파일 업로드 미리보기 드래그 앤 드롭 지원).

Jan 01, 2018 pm 06:35 PM
bootstrap fileinput 플러그인

이 글에서는 주로 부트스트랩 업로드 플러그인 파일 입력을 기반으로 하는 ajax의 비동기 업로드 기능을 소개합니다(여러 파일 업로드 미리 보기의 드래그 앤 드롭 지원). 매우 좋고 ajax 업로드에 관심이 있는 친구들은 참고할 수 있습니다. 부트스트랩 플러그인 파일 입력을 기반으로 업로드하려면 ajax 비동기 업로드 기능을 구현합니다(다중 파일 업로드 미리보기 드래그 앤 드롭 지원) 기사!

먼저 js 및 css 파일을 가져와야 합니다.

<link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="external nofollow" />
 <script type="text/javascript" src="__PUBLIC__/JS/bootstrap.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/JS/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/JS/fileinput.js"></script>
<script type="text/javascript" src="__PUBLIC__/JS/fileinput_locale_zh.js"></script>//中文包,不需要可以不用导入
로그인 후 복사

html code

<form enctype="multipart/form-data">
  <input id="file-1" name="file" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1"/>
</form>
로그인 후 복사

js code

$("#file-1").fileinput({
  uploadUrl: &#39;&#39;, // 必须设置个路径进入php代码部分
  allowedFileExtensions : [&#39;jpg&#39;, &#39;png&#39;,&#39;gif&#39;,&#39;txt&#39;,&#39;zip&#39;,&#39;ico&#39;,&#39;jpeg&#39;,&#39;js&#39;,&#39;css&#39;,&#39;java&#39;,&#39;mp3&#39;,&#39;mp4&#39;,&#39;doc&#39;,&#39;docx&#39;],//允许的文件类型
  overwriteInitial: false,
  maxFileSize: 1500,//文件的最大大小 单位是k
  maxFilesNum: 10,//最多文件数量 
  // allowedFileTypes: [&#39;image&#39;, &#39;video&#39;, &#39;flash&#39;],
  slugCallback: function(filename) {
    return filename;
  }
});
로그인 후 복사

php code

$file=$_FILES[&#39;file&#39;];//获取上称文件的信息,数组形式
$date[&#39;file_name&#39;] = $file[&#39;name&#39;];//文件的名称
$date[&#39;file_size&#39;] = $file[&#39;size&#39;];//文件的大小
$date[&#39;file_type&#39;] = $file[&#39;type&#39;];//文件的类型
로그인 후 복사

그럼 업로드하시고, ajax를 사용하여 오류 메시지나 성공 메시지를 반환하세요

echo를 사용하여 직접 반환할 수도 있습니다.

스타일:

위는 에디터에서 소개한 부트스트랩 기반 업로드 플러그인 파일 입력의 ajax 비동기 업로드 기능입니다(다중 파일 업로드 미리보기 드래그 앤 드롭 지원). 모두에게 도움이 되세요! !

관련 권장 사항:

Ajax 오류 처리 방법

ajax 로컬 json을 읽는 방법

Ajax 버튼을 요청할 때 한 번 클릭하고 두 번 제출하는 솔루션

위 내용은 부트스트랩 기반 업로드 플러그인 파일 입력은 Ajax 비동기 업로드 기능을 구현합니다(다중 파일 업로드 미리보기 드래그 앤 드롭 지원).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PyCharm 초보자 가이드: 플러그인 설치에 대한 전반적인 이해! PyCharm 초보자 가이드: 플러그인 설치에 대한 전반적인 이해! Feb 25, 2024 pm 11:57 PM

PyCharm 초보자 가이드: 플러그인 설치에 대한 전반적인 이해!

Eclipse에 부트스트랩을 도입하는 방법 Eclipse에 부트스트랩을 도입하는 방법 Apr 05, 2024 am 02:30 AM

Eclipse에 부트스트랩을 도입하는 방법

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? Mar 08, 2024 am 08:55 AM

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요?

Edge 브라우저가 이 플러그인을 지원하지 않는 이유에 대한 세 가지 해결 방법을 공유하세요. Edge 브라우저가 이 플러그인을 지원하지 않는 이유에 대한 세 가지 해결 방법을 공유하세요. Mar 13, 2024 pm 04:34 PM

Edge 브라우저가 이 플러그인을 지원하지 않는 이유에 대한 세 가지 해결 방법을 공유하세요.

부트스트랩에 아이디어를 도입하는 방법 부트스트랩에 아이디어를 도입하는 방법 Apr 05, 2024 am 02:33 AM

부트스트랩에 아이디어를 도입하는 방법

부트스트랩 매개 효과 테스트 결과를 Stata에서 읽는 방법 부트스트랩 매개 효과 테스트 결과를 Stata에서 읽는 방법 Apr 05, 2024 am 01:48 AM

부트스트랩 매개 효과 테스트 결과를 Stata에서 읽는 방법

대형모델간 75만 라운드 1대1 대결, GPT-4가 우승, 라마3가 5위 대형모델간 75만 라운드 1대1 대결, GPT-4가 우승, 라마3가 5위 Apr 23, 2024 pm 03:28 PM

대형모델간 75만 라운드 1대1 대결, GPT-4가 우승, 라마3가 5위

부트스트랩 조정 테스트 결과를 읽는 방법 부트스트랩 조정 테스트 결과를 읽는 방법 Apr 05, 2024 am 03:30 AM

부트스트랩 조정 테스트 결과를 읽는 방법

See all articles