찾다
웹 프론트엔드JS 튜토리얼자체 제작 파일 업로드 JS 컨트롤은 IE, Chrome, Firefox etc_javascript 기술을 지원할 수 있습니다.

复代码码 代码如下:

(function() {
if (window.FileUpload) {
return;
}
window.FileUpload = 함수(id, url) {
this.id = id;
this.autoUpload =
this.url;
this.maxSize = null;
this.extensions = null;
this.dropId = null
}

window.FileUpload.prototype.init = function()
var obj = this;
$('#' this.id).change(function () {
if (obj.autoUpload) {
obj.upload();
}
});
if (this.supportsFormData()) {
if (this.dropId != null) {
var drop = $('#' this.dropId)[0];
drop.addEventListener("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
$('#' obj.dropId).addClass(" dragover");
}, false);
drop.addEventListener("dragout", function(e) {
$('#' obj.dropId).removeClass("dragover");
}, false);
drop.addEventListener("drop", function(e) {
e.stopPropagation();
e.preventDefault();
$('#' obj. dropId).removeClass("dragover");
obj._uploadUsingFormData(e.dataTransfer.files[0]);
}, 거짓);
}
} else {
if (this.dropId != null) {
$('#' this.dropId).hide();
}
}
};

FileUpload.prototype.supportsFormData = function() {
return window.FormData != 정의되지 않음;
};

FileUpload.prototype.upload = function() {
if (this.supportsFormData()) {
this._uploadUsingFormData($("#" this.id)[0].files[ 0]);
} else {
this._uploadUsingFrame();
}
};

FileUpload.prototype._uploadUsingFrame = function() {
var obj = this;
var $frame = $('#uploadFrame');
if ($frame.length == 0) {
$frame = $('');
$frame.appendTo("body");
$frame.load(function() {
var response = $frame.contents().text();
try {
var json = $.parseJSON(response);
$(obj).trigger("onLoad", json);
} catch(ex) {
$(obj).trigger("onError", response)
}
});
}
var form = $("#" this.id).closest("form")[0];
form.target = 'uploadFrame';
양식.제출();
};

FileUpload.prototype._uploadUsingFormData = 함수(파일) {
var obj = this;
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function (e) {
var json = $.parseJSON(xhr.response);
$(obj).trigger("onLoad", json);
}, 거짓);
xhr.addEventListener("error", function (e) {
$(obj).trigger("onError", e);
}, false);
xhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
$(obj).trigger("onProgress", e.loaded, e.total) ;
}
}, 거짓);
xhr.open("POST", obj.url);

if (obj.maxSize != null&&file.size>obj.maxSize) {
$(obj).trigger("onMaxSizeError");
반환;
}
if (obj.extensions != null) {
var name = file.name;
var ext = name.substring(name.lastIndexOf("."), name.length).toLowerCase();
if (obj.extensions.indexOf(ext) $(obj).trigger("onExtensionError");
반환;
}
}
var formData = new FormData();
formData.append("파일", 파일);
xhr.send(formData);
};

FileUpload.prototype.onLoad = function(handler) {
$(this).bind("onLoad", function(sender, args) {
handler && handler(args);
});
};

FileUpload.prototype.onProgress = 함수(핸들러) {
$(this).bind("onProgress", function(sender, loading, total) {
handler && handler(loaded, total) )
});
};

FileUpload.prototype.onError = 함수(핸들러) {
$(this).bind("onError", function(sender, error) {
handler && handler(error);
});
};

FileUpload.prototype.onMaxSizeError = function(handler) {
$(this).bind("onMaxSizeError", handler);
};

FileUpload.prototype.onExtensionError = 함수(핸들러) {
$(this).bind("onExtensionError", handler);
};
})();
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
将文件上传到 Amazon S3 时修复网络错误的 3 种方法将文件上传到 Amazon S3 时修复网络错误的 3 种方法Apr 14, 2023 pm 02:22 PM

Amazon Simple Storage Service,简称Amazon S3,是一种使用 Web 界面提供存储对象的存储服务。Amazon S3 存储对象可以存储不同类型和大小的数据,从应用程序到数据存档、备份、云存储、灾难恢复等等。该服务具有可扩展性,用户只需为存储空间付费。Amazon S3 有四个基于可用性、性能率和持久性的存储类别。这些类包括 Amazon S3 Standard、Amazon S3 Standard Infrequent Access、Amazon S3 One

Vue 中如何实现文件上传功能?Vue 中如何实现文件上传功能?Jun 25, 2023 pm 01:38 PM

Vue作为目前前端开发最流行的框架之一,其实现文件上传功能的方式也十分简单优雅。本文将为大家介绍在Vue中如何实现文件上传功能。HTML部分在HTML文件中添加如下代码,创建上传表单:<template><div><formref="uploadForm"enc

node项目中如何使用express来处理文件的上传node项目中如何使用express来处理文件的上传Mar 28, 2023 pm 07:28 PM

怎么处理文件上传?下面本篇文章给大家介绍一下node项目中如何使用express来处理文件的上传,希望对大家有所帮助!

浅析vue怎么实现文件切片上传浅析vue怎么实现文件切片上传Mar 24, 2023 pm 07:40 PM

在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传,很简单哈,就是把比如说1个G的文件流切割成若干个小的文件流,然后分别请求接口传递这个小的文件流。

CakePHP如何处理文件上传?CakePHP如何处理文件上传?Jun 04, 2023 pm 07:21 PM

CakePHP是一个开源的Web应用程序框架,它基于PHP语言构建,可以简化Web应用程序的开发过程。在CakePHP中,处理文件上传是一个常见的需求,无论是上传头像、图片还是文档,都需要在程序中实现相应的功能。本文将介绍CakePHP中如何处理文件上传的方法和一些注意事项。在Controller中处理上传文件在CakePHP中,上传文件的处理通常在Cont

如何解决PHP语言开发中常见的文件上传漏洞?如何解决PHP语言开发中常见的文件上传漏洞?Jun 10, 2023 am 11:10 AM

在Web应用程序的开发中,文件上传功能已经成为了基本的需求。这个功能允许用户向服务器上传自己的文件,然后在服务器上进行存储或处理。然而,这个功能也使得开发者更需要注意一个安全漏洞:文件上传漏洞。攻击者可以通过上传恶意文件来攻击服务器,从而导致服务器遭受不同程度的破坏。PHP语言作为广泛应用于Web开发中的语言之一,文件上传漏洞也是常见的安全问题之一。本文将介

Django框架中的文件上传技巧Django框架中的文件上传技巧Jun 18, 2023 am 08:24 AM

近年来,Web应用程序逐渐流行,而其中许多应用程序都需要文件上传功能。在Django框架中,实现上传文件功能并不困难,但是在实际开发中,我们还需要处理上传的文件,其他操作包括更改文件名、限制文件大小等问题。本文将分享一些Django框架中的文件上传技巧。一、配置文件上传项在Django项目中,要配置文件上传需要在settings.py文件中进

PHP8.0中的文件上传库:FlysystemPHP8.0中的文件上传库:FlysystemMay 14, 2023 am 08:37 AM

随着互联网的发展和普及,文件上传功能已经成为现代网站开发的必备功能之一。不论是网盘还是社交平台,文件上传都是必不可少的一环。而在PHP领域,由于其广泛的应用和易用性,文件上传的需求也非常常见。在PHP8.0中,一个名为Flysystem的文件上传库正式出现,它为PHP开发人员提供了更加高效、灵活且易于使用的文件上传和管理解决方案。Flysystem是一个轻量

See all articles

핫 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를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구