<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
印象当中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', success: this._uploadImageSuccess.delegate(this) }; this.loadBegin(); $.ajaxFile(data); }, _uploadImageSuccess: function (result) { this.loadEnd(); if (result.done) { // 成功时，调用成功回调函数 this.success(result); } else { // 失败时，调用失败回调函数 if (this.error(result) === false) { } else { $.warning(result.msg, '提示'); } } this._bindEvents(); }, _cancelUpload: function () { $.ajaxFile.cancel(); this.$input = this.$wrapper.find('input').unbind().change(this._uploadImage.delegate(this)); } }; $.fn.extend({ uploadWrapper: function (params) { var options = $.mergeObject(defaults, params); this.each(function (i, item) { new uploadWrapper($(item), options); }); } });})();