X龙@China .Net 'blog

需要的不仅仅是工作,而是通过努力得来的美好将来。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

input type=file显示及清空值

Posted on 2012-02-22 13:40  X龙  阅读(9748)  评论(0编辑  收藏  举报
// 文件上传:只显示文本框,当鼠标经过,显示input type=file
$(function() {
    $(".up_file").each(function() {
        var container = this;
        var txtSrc = $("input[type='text']", this);
        var fileObj = $("input[type='file']", this);

        txtSrc.mouseover(function() {
            txtSrc.hide();
            fileObj.show();
        })

        fileObj.mouseout(function() {
            fileObj.hide();
            txtSrc.show();

            if (fileObj.val().length > 0) {
                txtSrc.val(fileObj.val());
            }
        });
    });
})

// 清空文件上传控件
//
      不能直接用js修改input type=file的value,但可以通过form的reset()清空它的值
//
      解决:将input type=file放进一个临时form,清空value,再将它移到原来位置
function emptyFileUpload(selector) {
    var fi;
    var sourceParent;

    if (selector) {
        fi = $(selector);
        sourceParent = fi.parent();
    }
    else {
        return;
    }

    $("<form id='tempForm'></form>").appendTo(document.body);

    var tempForm = $("#tempForm");

    tempForm.append(fi);
    tempForm.get(0).reset();

    sourceParent.append(fi);
    tempForm.remove();
}
点击这里给我发消息http://wp.qq.com/index.html