JS转换时间
 function renderTime(data) {
var da = eval('new ' + data.replace('/', '', 'g').replace('/', '', 'g'));
return da.getFullYear() + "/" + da.getMonth() + "/" + da.getDay() + "/" + da.getHours() + ":" + da.getSeconds() + ":" + da.getMinutes();
}

JS转换Input file为图片路径

function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
Savefiles[url] = file;
return url;
}

Js控制表单的上传时效

function SubmitFrom()
{
var Backinfo = new Array();
var m = ;
for( var n in Savefiles)
{
if (Savefiles[n] != null)
{
m++;
var formData = new FormData();
formData.append('file', Savefiles[n]);
var oReq = new XMLHttpRequest();
oReq.open("POST", "/WorkOrder/ImageUpload", false);
oReq.onload = function (oEvent) {
if (oReq.readyState == ) {
if (oReq.status == || oReq.status == ) {
var result = oReq.responseText;
if(result=="OK")
{
Backinfo[m] = "OK";
$("#ImageDiv").text("第"+m+"张图片已上传");
} }
}
};
oReq.send(formData);
}
if(Backinfo[m]=="OK")
{
Savefiles[n] == null;
}
}
for (var i = ; i < Backinfo.length; i++)
{ if (Backinfo[i]!="OK" )
{
if(confirm("第"+i+"张图片添加失败是否继续上传"))
{
$('#ImgForm').submit();
}
else
{
return;
}
}
}
var file = $("#imgFlie");
file.after(file.clone().val(""));
file.remove();
$('#ImgForm').submit();
$('#button').attr("disabled", "disabled");
$('#button').attr("value", "已提交修改");
$('#button').css("color","red");
}

JS 转换Input file 为图片路径(通过fileRead)

function showPicture(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!/image\/\w+/.test(file.type)) {
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var img = new Image();
img.src = this.result;
img.onload = function () {
var size = img.width + 'x' + img.height;
$("#ImageDiv").append('<div>' +
'<a href=' +
'"' + img.src + '"' +
'data-size=' +
'"' + size + '"' +
'>' +
'<img class="WorkOrderimageNew" style="height:40px;width:40px;" src=' +
'"' + img.src + '"' +
'>' +
'</a>' +
'</div>'
)
}
}
}
}

JQ注册input change事件(因JQ版本不同注册的关键字不同)

$("#imgFlie").live("change", function () {
var data = this.files;
$(this).clone().replaceAll(file = this); //每次选中都保存旧元素,并使用新的控件替换
$.each(data, function (key, value) {
var objUrl = getObjectURL(value);
if (objUrl) {
var img = new Image();
img.src = objUrl;
img.onload = function () {
var size = img.width + 'x' + img.height;
$("#ImageDiv").append('<figure><div>' +
'<a href=' +
'"' + objUrl + '"' +
'data-size=' +
'"' + size + '"' +
'>' +
'<img class="WorkOrderimageNew" style="height:40px;width:40px;" src=' +
'"' + img.src + '"' +
'>' +
'</a>' +
'</div>' +
' </figure>'
)
};
}
});
});

JS循环遍历删除动态生成的节点(只做参考)

function deleteNode(imagePath)
{
var Div=document.getElementById("ImageDiv");
var figures = Div.childNodes;
var cycle = false;
var n = undefined;
for (var f = figures.length - 1; f >= 0; f--) {
if (cycle == true&&n!=undefined)
{
Div.removeChild(figures[n])
deleteArray(imagePath);
break;
}
if (figures[f].nodeName == "FIGURE") {
Divs = figures[f].childNodes;
for (var d = Divs.length - 1; d >= 0; d--) {
if (Divs[d].nodeName == "DIV") {
aNodes = Divs[d].childNodes;
for (var a = aNodes.length - 1; a >= 0; a--) {
console.log("A:" + aNodes[a].nodeName);
if (aNodes[a].nodeName == "A") {
imgNodes = aNodes[a].childNodes[0];
if (imgNodes.src == imagePath) {
cycle = true;
n = f;
break;
}
}
} }
}
}
}
}

  

总结:

1,表单中input file 提交的文件在部分浏览器中可以获取文件名称进而可以判断是否重复选择同一文件,而手机端获取到的是虚拟的就算是选择相同的文件也会生成不同的虚拟文件所以不能判断所选文件是否重复,类似于发说说上传图片一样同一张图片可以一次上传多个,转换文件为图片Url通过FileReader和createObjectURL,

2,对于重复选择input file 不能触发change的事件解决办法参考:http://www.cnblogs.com/axl234/p/3897399.html

3,对于选择的图片让其显示可以给input注册change事件 JS    <input type="file" name="fileData" id="imgFlie"  onchange="showPicture()" multiple />

Jq $("#imgFlie").live("change", function () { var files=this.files}

JS 更改表单的提交时间和Input file的样式的更多相关文章

  1. DEDE自定义表单显示提交时间|添加提交时间,获取ip的方法

    前提是后台自定义表单字段一定要有  “时间”,这里的acca_time <div class="tit">*咨询内容:</div> <div clas ...

  2. 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

    方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...

  3. 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结

    1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...

  4. js防止表单重复提交的两种方法

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志: 复制代码代码如下: <script language=""javascript"" ...

  5. js学习之道:js防止表单重复提交

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志: <script language="”javascript”"> var checkSubmi ...

  6. jquery.form.js+jquery.validation.js实现表单校验和提交

      一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...

  7. js防止表单重复提交

    1.表单 <form id="addForm" onsubmit="getElementById('submitInput').disabled=true;retu ...

  8. JS 防止表单重复提交的方法

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志: <script language="”JavaScript”"> var checkSubmi ...

  9. JS/Jquery 表单方式提交总结

    1. submit提交 (1). submit 按钮式提交 缺点:在提交前不可修改提交的form表单数据 // 1. html <form method="post" act ...

随机推荐

  1. MS Sql 查询数据库连接数

    SELECT * FROM [Master].[dbo].[SYSPROCESSES] WHERE [DBID] IN (SELECT [DBID]FROM [Master].[dbo].[SYSDA ...

  2. Android_通过ContentObserver监听短信数据变化

    1.简单介绍 在小米等一些机型,无法接收系统发出的短信广播. 仅仅能通过观察者ContentObserver,去监听短信数据的变化 2.SMS数据介绍 content://sms/inbox     ...

  3. [LeetCode] Search in Rotated Sorted Array [35]

    题目 Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 m ...

  4. css overflow

    overflow-x,overflow-y的值相同等同于overflow overflow-x,overflow-y的值不同,其中一个被赋值visible,另一个被赋值为auto,scroll,hid ...

  5. JavaScript学习笔记——JS中的变量复制、参数传递和作用域链

    今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...

  6. 用CSS做圆角矩形

    第一种方法:如果是CSS2.2的话,可以简单写一个制作圆角矩形,分上中下裁成三张图 <title>CSS3实现圆角</title> <style type="t ...

  7. 接触CrackMe 第一个

    今天刚接触这个 做了一个简单的. 用Onlydbg加载之后,对GetDlgItemTextA函数下断点,因为程序是在控件上获取数据的. Register输入Name和Serial点击Ok之后,断点响应 ...

  8. Java多线程并发编程之原子变量与非阻塞同步机制

    1.非阻塞算法 非阻塞算法属于并发算法,它们可以安全地派生它们的线程,不通过锁定派生,而是通过低级的原子性的硬件原生形式 -- 例如比较和交换.非阻塞算法的设计与实现极为困难,但是它们能够提供更好的吞 ...

  9. Spring随笔 - 事务隔离级别

    Spring提供5中事务隔离级别: ISOLATION_DEFAULT:使用数据库后端的默认隔离级别. ISOLATION_READ_UNCOMMITTED:允许读取尚未提交的数据变更.可能会导致脏读 ...

  10. System V 机制(转)

    引言 UNIX 内核管理的进程自主地操作,从而产生更稳定的系统.然而,每个开发人员最终都会遇到这样的情况,即其中一组进程需要与另一组进程通信,也许是为了交换数据或发送命令.这种通信称为进程间通信(In ...