


The self-made file upload JS control can support IE, chrome, firefox etc_javascript skills
(function() {
if (window.FileUpload) {
return;
}
window.FileUpload = function (id, url) {
this.id = id;
this.autoUpload = true;
this.url = 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]);
}, false);
}
} else {
if (this.dropId != null) {
$('#' this.dropId).hide();
}
}
};
FileUpload.prototype.supportsFormData = function() {
return window.FormData != undefined;
};
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';
form.submit();
};
FileUpload.prototype._uploadUsingFormData = function (file) {
var obj = this;
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function (e) {
var json = $.parseJSON(xhr.response);
$(obj).trigger("onLoad", json);
}, false);
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);
}
}, false);
xhr.open("POST", obj.url);
if (obj.maxSize != null&&file.size>obj.maxSize) {
$(obj).trigger("onMaxSizeError");
return;
}
if (obj.extensions != null) {
var name = file.name;
var ext = name.substring(name.lastIndexOf("."), name.length).toLowerCase();
if (obj.extensions.indexOf(ext) < 0) {
$(obj).trigger("onExtensionError");
return;
}
}
var formData = new FormData();
formData.append("files", file);
xhr.send(formData);
};
FileUpload.prototype.onLoad = function(handler) {
$(this).bind("onLoad", function(sender, args) {
handler && handler(args);
});
};
FileUpload.prototype.onProgress = function (handler) {
$(this).bind("onProgress", function(sender, loaded, total) {
handler && handler(loaded, total);
});
};
FileUpload.prototype.onError = function (handler) {
$(this).bind("onError", function(sender, error) {
handler && handler(error);
});
};
FileUpload.prototype.onMaxSizeError = function(handler) {
$(this).bind("onMaxSizeError", handler);
};
FileUpload.prototype.onExtensionError = function (handler) {
$(this).bind("onExtensionError", handler);
};
})();

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to use Laravel to implement file upload and download functions Laravel is a popular PHP Web framework that provides a wealth of functions and tools to make developing Web applications easier and more efficient. One of the commonly used functions is file upload and download. This article will introduce how to use Laravel to implement file upload and download functions, and provide specific code examples. File upload File upload refers to uploading local files to the server for storage. In Laravel we can use file upload

To implement file upload and download in Workerman documents, specific code examples are required. Introduction: Workerman is a high-performance PHP asynchronous network communication framework that is simple, efficient, and easy to use. In actual development, file uploading and downloading are common functional requirements. This article will introduce how to use the Workerman framework to implement file uploading and downloading, and give specific code examples. 1. File upload: File upload refers to the operation of transferring files on the local computer to the server. The following is used

How to implement file upload using gRPC? Create supporting service definitions, including request and response messages. On the client, the file to be uploaded is opened and split into chunks, then streamed to the server via a gRPC stream. On the server side, file chunks are received and stored into a file. The server sends a response after the file upload is completed to indicate whether the upload was successful.

How to solve Java file upload exception (FileUploadException). One problem that is often encountered in web development is FileUploadException (file upload exception). It may occur due to various reasons such as file size exceeding limit, file format mismatch, or incorrect server configuration. This article describes some ways to solve these problems and provides corresponding code examples. Limit the size of uploaded files In most scenarios, limit the file size

PHP file upload guide: How to use the move_uploaded_file function to handle uploaded files In developing web applications, file upload is a common requirement. PHP provides a convenient function move_uploaded_file() for processing uploaded files. This article will introduce you how to use this function to implement the file upload function. 1. Preparation Before starting, make sure that your PHP environment has been configured with file upload parameters. You can do this by opening php.in

File Uploading and Processing in Laravel: Managing User Uploaded Files Introduction: File uploading is a very common functional requirement in modern web applications. In the Laravel framework, file uploading and processing becomes very simple and efficient. This article will introduce how to manage user-uploaded files in Laravel, including verification, storage, processing, and display of file uploads. 1. File upload File upload refers to uploading files from the client to the server. In Laravel, file uploads are very easy to handle. first,

How to use PHP to implement FTP file upload progress bar 1. Background introduction In website development, file upload is a common function. For the upload of large files, in order to improve the user experience, we often need to display an upload progress bar to the user to let the user know the file upload process. This article will introduce how to use PHP to implement the FTP file upload progress bar function. 2. The basic idea of implementing the progress bar of FTP file upload. The progress bar of FTP file upload is usually calculated by calculating the size of the uploaded file and the size of the uploaded file.

Answer: Yes, Golang provides functions that simplify file upload processing. Details: The MultipartFile type provides access to file metadata and content. The FormFile function gets a specific file from the form request. The ParseForm and ParseMultipartForm functions are used to parse form data and multipart form data. Using these functions simplifies the file processing process and allows developers to focus on business logic.
