html带有进度条的登陆,带进度条上传

最新推荐文章于 2021-08-06 22:12:21 发布

转载最新推荐文章于 2021-08-06 22:12:21 发布 · 204 阅读

文章标签：

该博客内容涉及HTML页面中文件上传的实现，包括文件类型的限制（如支持jpg, jpeg, png, bmp, gif, pdf, doc, docx），文件上传进度显示，以及上传文件的错误提示。代码示例展示了如何使用jQuery和JavaScript进行文件选择、验证和上传进度的处理。

[html]代码库@{

ViewBag.Title = "Create";

Layout = "~/Views/Shared/_FormLayoutPage.cshtml";

}

.table-bordered > thead > tr > th,

.table-bordered > tbody > tr > th,

.table-bordered > tfoot > tr > th,

.table-bordered > thead > tr > td,

.table-bordered > tbody > tr > td,

.table-bordered > tfoot > tr > td

{

border: 1px solid #ddd;

}

.file input {

position: absolute;

font-size: 100px;

right: 0;

top: 0;

opacity: 0;

}

.file:hover {

background: #AADFFD;

border-color: #78C3F3;

color: #004974;

text-decoration: none;

}

文件上传	选择文件上传并导入支持的格式有(jpg,jpeg,png,bmp,gif,pdf,doc,docx)
上传进度
附件名称	@ViewBag.filename

下载

删除

var FileType;

var str;

var type = "@ViewBag.DictId.ToString()";

$(document).ready(function () {

if( type =="acd54fa1-6568-4c20-890f-b9f36678e671")

{

$("#extension").html("支持的格式有(pdf,doc,docx)");

str= $("#extension").html().toString();

FileType=[".pdf", ".doc", ".docx"];

}

if (type == "487b4083-246e-44bc-a44a-86aa6d6c5dd6") {

$("#extension").html("支持的格式有(pdf,doc,docx,jpg)");

str = $("#extension").html().toString();

FileType = [".pdf", ".doc", ".docx", ".jpg"];

}

});

function fileSelected() {

var file = $("#UploadFile").val();

console.log(file);

var file_name = file.substring(file.lastIndexOf('\\') + 1, file.lastIndexOf('.'));

var file_typename = file.substring(file.lastIndexOf('.'), file.length);

if ($.inArray(file_typename, FileType) >= 0) {//这里限定上传文件文件类型

if (file) {

$("#uploadFile").show();

document.getElementById('fileName').innerHTML = file_name;

}

else {

$("#uploadFile").hide();

document.getElementById('fileName').innerHTML = "错误提示:上传文件应该是" + str.substr(str.indexOf("(") + 1, str.indexOf(")") - str.indexOf("(") - 1) + "后缀而不应该是" + file_typename + ",请重新选择文件"

}

function uploadFile() {

$(".pageForm").ajaxSubmit({

dataType: 'json',

beforeSend: function () {

uploadProgress: function (event, position, total, percentComplete) {

var percentVal = percentComplete + '%';

$('#progressNumber').progressbar('setValue', percentComplete);

success: function (evt) {

if (evt != null) {

if (evt.Success) {

top.$('#FileDialog').attr("returndata", JSON.stringify(evt));

var dialog = top.$('#FileDialog').dialog();

dialog.dialog('close');

}

else {

top.$.messager.alert('上传失败', evt.Message, 'info');

}

error: function (evt) {

top.$.messager.alert('上传出错', evt.Message, 'info');

}

});

}

@*function deleteFile()

{

var url="@Url.Action("RemoveNew", "UploadFile", new { id = ViewBag.fileid })";

top.$.messager.confirm('删除询问', '您确定要删除附件？', function (r)

{

if (r)

{

$.post(url, function (result)

{

if (!result.Success) {

top.$.messager.alert('操作提示', result.Message, 'error');

}

else {

top.$.messager.alert('操作提示', "操作成功！", 'info');

document.getElementById('fileName').innerHTML = "";

}

}, 'json');

}

});

}*@

[源代码打包下载]