JS 更改表单的提交时间和Input file的样式

  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 = 0;
    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 == 4) {
                    if (oReq.status == 200 || oReq.status == 0) {
                        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 = 1; 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}