日期:2014-05-18  浏览次数:20497 次

asp:FileUpload 控件问题
<asp:FileUpload ID="FuFile" runat="server" CssClass="FileUploa" />
 <input id="butFile" type="button" value="浏览" onclick="file('content_FuFile')" class="FileUp" />

input 按钮覆盖掉FileUpload 的浏览按钮 js代码如下
function file(str)
{
  var file=document.getElementById(str);
  file.click();
}

主要用于点击input 触发FileUpload 打开选中文件的框框

问题在于点击
 <asp:Button ID="btn" runat="server" CssClass="inquiry" Text=" 保存 " OnClick="btn_Click"/>
时,FileUpload 会自动清空,也不会提交到后台,根本不进入后台,打断点,也没发现进入,何解?
只要FileUpload 有值都不会进入,当FileUpload 为空时就可以进入,如果不用 input 的js 来触发,直接用FileUpload
就没问题....
这是怎么回事呀,请高手赐教

------解决方案--------------------
看看这个:

http://www.quirksmode.org/dom/inputfile.html

印象当中input file有特殊控制,必须你手动去点击浏览按钮才可以实现,不记得源自何处了,也就是说自定义实现的是无效的
------解决方案--------------------
给你推荐一个我们老大写的jquery插件。可以支持将任意元素扩展为上传控件
JScript code

/// <reference path="jquery-1.4.4.min.js" />

/*
* jQuery插件
*
* 任意元素扩展为单选上传按钮
*
* By hongfei
*/

(function () {

    var defaults = {
        url: '',
        success: null,
        error: null,
        loadBegin: null,
        loadEnd: null,
        mouseOver: null,
        mouseOut: null
    };

    function uploadWrapper($wrapper, options) {
        this.$wrapper = $wrapper;
        this.url = options.url;
        this.success = $.delegate(options.success);
        this.error = $.delegate(options.error);
        this.loadBegin = $.delegate(options.loadBegin);
        this.loadEnd = $.delegate(options.loadEnd);
        this.mouseOver = $.delegate(options.mouseOver);
        this.mouseOut = $.delegate(options.mouseOut);
        this.initPos = {};
        this._init();
    }

    uploadWrapper.prototype = {
        constructor: uploadWrapper,
        _init: function () {
            this.$wrapper.removeClass('ui_upload_wrap').addClass('ui_upload_wrap');
            this.$image = this.$wrapper.find('img');
            if (this.$wrapper.find('.ui_uploader_s_file').length == 0) {
                this.$input = $('<input name="ui_uploader_s_file" id="ui_uploader_s_file" type="file" hidefocus="true"/>');
                this.$wrapper.append(this.$input);
            }
            return this._bindEvents();
        },
        _bindEvents: function () {
            this.$wrapper.unbind()
                .mouseover(this._fileFollowBegin.delegate(this))
                .mousemove(this._fileFollow.delegate(this))
                .mouseout(this._fileFollowEnd.delegate(this));
            this.$input = this.$wrapper.find('input').unbind().change(this._uploadImage.delegate(this));
            if (this.$btnCancel) {
                this.$btnCancel.click(_cancelUpload);
            }
            return this;
        },
        /// 开始input:file跟随鼠标
        _fileFollowBegin: function (e) {
            this.initPos = this.$wrapper.offset();
            this._fileFollow(e);

            this.mouseOver();
        },
        /// 使input:file跟随鼠标
        _fileFollow: function (e) {
            this.initPos && this.$input.css({
                left: e.pageX - this.initPos.left - 40,
                top: e.pageY - this.initPos.top - 15
            });
        },
        /// 结束input:file跟随鼠标
        _fileFollowEnd: function (e) {
            this.$input.css({
                left: 0,
                top: 0
            });

            this.mouseOut();
        },
        _uploadImage: function () {
            if (this.$input.val().trim() == '') {
                return;
            }
            var data = {
                input: this.$input,
                url: this.url,
                dataType: 'json',