有码有真相：先上代码 imgValOptions.js
// JavaScript Document
//文件验证的配置文件，暂时做了图片的上传验证，支持gif/png/jpg/bmp等文件的上传，可更改类型和配置项
var imgValOptions = {
gif : 1,
png : 1,
jpg : 1,
bmp : 1,
rar : 0,
zip : 0,
swf : 0
};
上示代码为文件上传的配置文件，可根据自己的需求添加，1默认为true，0默认为false。
控制类的代码如下：imgVal.js
// JavaScript Document
//提供图片验证的数组
var imgValidateCons = {};
/*
imgValidateCons.store存储上传验证的配置值
init()
*检测imgValOptions是否存在，如果存在则将其中所有的配置项以及值写在imgValidateCons.store中
imgValidateCons.store.add(cons, b)
*cons:配置项
*b:配置值
*将配置项和值存储在imgValidateCons.store对象中
imgValidateCons.store.check(cons)
*cons:配置项
*验证配置项是否存在或者是否值为1
*/
imgValidateCons.store = {
init : function(){
if(imgValOptions) {
for(var con in imgValOptions)
{
imgValidateCons.store[con] = imgValOptions[con];
}
}
},
add : function(cons, b){imgValidateCons.store[cons] = b; return 1;},
check : function(cons){
var store = imgValidateCons.store;
if(store[cons])
return 1;
else
return 0;
}
}
imgValidateCons.store.init()负责初始化，如有options在imgValOptions.js中，则读入配置项，完成初始化，add负责添加新的配置项，check负责检验。
最后给出一个例子，其中的store.check(cons)可以被store[cons]替代，这是访问对象属性的一种方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片上传验证</title>
</head>
<body>
<form action="www.baidu.com" method="post" id="form">
<input type="file" id="file" name="file" />
<input type="button" onclick="submitBefore()"/>
</form>
</body>
<script type="text/javascript" src="imgValOptions.js"></script>
<script type="text/javascript" src="imgVal.js"></script>
<script type="text/javascript">
var store = "";
var d = document;
window.onload = function(){
imgValidateCons.store.init();
store = imgValidateCons.store;
};
var submitBefore = function(){
var file = d.getElementById("file");
fileVal = file.value;
fileSuffix = fileVal.substr(fileVal.lastIndexOf(".") + 1, fileVal.length);
if(store.check(fileSuffix)) d.getElementById("form").submit();
//if(store.check[fileSuffix]) d.getElementById("form").submit();
return false;
};
</script>
</html>
分享到：
相关推荐
总的来说，"javascript+HTML5 多文件上传（插件）多进度条显示"项目展示了如何利用HTML5的新特性实现实时多文件上传和进度监控。通过这个项目，开发者可以学习到如何构建一个功能完善的文件上传系统，提升用户在Web...
总结，JS上传图片插件利用了JavaScript的File API和Ajax技术，结合jQuery-File-Upload插件，可以实现高效、用户体验良好的图片上传功能。在实际应用中，还需要考虑安全性和性能优化，确保服务的稳定和用户体验。
easyUpload.js是一款轻量级的JavaScript库，专门针对文件上传场景设计，它简化了上传流程，提高了用户体验，并提供了丰富的自定义选项。本文将深入探讨easyUpload.js的核心特性、工作原理以及如何在项目中有效集成和...
在网页开发中，多文件上传功能是一个常见的需求，特别是在用户需要一次性上传多个图片、文档或者其他类型文件的场景。本文将详细介绍一个基于JavaScript实现的通用多文件上传类，并提供源码分析，帮助开发者理解和...
总结来说，".NET 多文件上传 js控制和设置 灵活强大"的实现，是通过JavaScript的前端控制和.NET的后端处理相结合，实现了多文件选择、验证、异步上传、进度反馈等特性，同时提供了高度的可定制性和扩展性，使得...
前端可能采用轮询或WebSocket等方式实时获取文件上传进度，后台则可以利用多线程或异步任务队列来处理批量文件，避免阻塞其他请求。 总结来说，"图片/文件批量上传+后台controller"这个示例涵盖了前端H5页面的批量...
### JS上传大文件技术解析：实现不限大小的文件上传及进度条显示 #### 技术背景与需求分析 在Web应用开发中，文件上传是一项基本的功能。随着互联网应用的不断扩展，用户对于文件上传的需求也变得越来越多样化。...
4. **jquery.ad-gallery.js**：这可能是一个图片画廊插件，虽然不是直接用于文件上传，但可以用于预览上传的图片。 5. **swfobject.js**：这是一个用于检测和嵌入Flash的JavaScript库，由于我们要移除Flash，这个...
在现代Web开发中，异步文件上传是一种常见的需求，它能提供更好的用户体验，因为用户可以在不刷新页面的情况下发送数据。本案例重点讲解如何利用前端的JavaScript（特别是AJAX）和后端的PHP来实现这样的功能，同时...
WebUploader支持多文件上传、断点续传、预览图片、拖拽上传等多种特性。开发者可以通过配置对象来调整上传策略，如限制文件类型、大小，设置上传URL等。在实际应用中，我们需要使用jQuery来初始化WebUploader对象，...
- `js`：这个目录包含了JavaScript代码，可能包含与文件上传相关的逻辑，如事件监听、文件读取、上传请求的发起等。 - `css`：用于定义界面样式，确保上传组件的美观和易用性。 - `uploads`：这个目录可能是服务器端...
jQuery作为一个轻量级、高性能的JavaScript库，为开发者提供了丰富的API和插件来实现各种复杂的功能，其中包括图片和文件上传。本篇文章将深入探讨“jQuery文件图片上传插件”的原理、实现方式以及常见问题。 首先...
"基于fileupload.js文件上传"的主题涉及了Ajax、Mvc以及fileupload.js这个JavaScript库，这些都是实现高效、用户友好的文件上传的关键技术。下面将详细阐述这些知识点。 首先，Ajax（Asynchronous JavaScript and ...
标题中的“net版 flash 文件 图片上传，.net多图片上传”指的是在.NET框架下，利用Flash技术实现图片的无刷新、多文件上传功能。这一技术常见于Web应用中，尤其是那些需要用户批量上传图片的场景，如社交媒体、电商...
在大文件上传方面，SpringBoot 提供了支持文件上传的API，我们可以利用这些API来处理文件接收和存储。 ### 分片上传 大文件分片上传是一种优化策略，通过将大文件拆分为多个小块（片段）进行上传，然后在服务器端...
在本案例中，我们讨论的主题是如何利用Base64编码的字符串将文件或图片上传到OSS。首先，我们需要理解Base64编码以及OSS的基本操作。 Base64是一种常见的数据编码方式，主要用于在不支持二进制传输的环境中传输数据...
这个场景中，我们将讨论如何使用JavaScript（尤其是原生JS）与ASP.NET框架来协同完成这一任务，并且包括删除服务器上已上传图片的实现。这是一篇面向初学者的技术指南，旨在提供一个基本的实现思路和参考方案。 ...
在JavaScript和jQuery的世界里，多文件上传功能是一个常见的需求，特别是在网页交互中。"js+jquery 多文件上传"这个项目就是针对这一需求而设计的，它已经经过了修改，可以顺利部署到Eclipse开发环境中，并且具备了...
本话题聚焦于js在线编辑器中的一个关键特性——图片上传功能。 图片上传功能对于在线编辑器来说是至关重要的，因为它使得用户能够直接在编辑环境中插入和管理图片，增强内容的表现力。通常，这个功能涉及到前端的...
总结来说，这个JavaScript插件利用了现代浏览器的特性，如FileReader、XMLHttpRequest和FormData，实现了跨浏览器的图片预览和无刷新异步批量上传功能。这对于构建用户友好的图像处理应用，尤其是社交媒体、电商平台...