<input type="file">设置的onchange只能执行一次的解决方案

最新推荐文章于 2022-09-20 14:31:23 发布

屈文哲

最新推荐文章于 2022-09-20 14:31:23 发布

阅读量7.4k

点赞数

分类专栏：【Web前端】文章标签： input file onchange

本文链接：https://blog.csdn.net/quwenzhe/article/details/58069107

版权

【Web前端】专栏收录该内容

23 篇文章 0 订阅

订阅专栏

项目中有一个图片上传、查看插件，但该插件只能执行一次上传操作，下次上传需重新刷新页面，很是不方便。
通过查阅相关资料发现，$(‘# ‘).replaceWith方法可以上述问题。
HTML脚本如下：

<div class="form-group"> 
 <label class="col-sm-3 control-label no-padding-right">图标/label> 
 <div class="col-sm-9"> 
  <input id="icon" name="icon" type="text" class="col-xs-10 col-sm-8""/> 
  <div style="display: none;"> 
   <input id="icon_id" type="file" name="files" data-target="[name=icon]" url="<%=path %>/fileUpload/upload.action" onchange="frame.upload(this);" /> 
  </div> 
  <input type="button" class="btn-primary" style="height: 30px" value="上传" onclick="javaScript:$('#icon_id').click();" /> 
  <input type="button" class="btn-primary" style="height: 30px" value="下载" onclick="javascript:openUrl('icon');" /> 
 </div> 
</div>

js脚本如下：

frame.upload = function(el) {
    var id = $(el).attr('id');
    var url = $(el).attr('url');
    var target = $(el).attr('data-target');
    var bind = $(el).attr('bind-img');
    var cb = $(el).attr('frame-cb');
    var name = $(el).attr('name') || 'files';
    var waitText = $(el).attr('waitText') || '正在上传，请稍候...';
    $(target).prop('disabled', true).val(waitText);
    var c = $(bind).attr('src');
    $(bind).attr('src', 'data:image/png;base64,R0lGOOw==');
    $(el).upload(url,
    function(data) {
        console.debug(data);
        try {
            var d = $.parseJSON(data);
            if (d.success) {
                var dt = d.data[name];
                c = dt.url || c;
                showMsg("提示", "info", dt.msg);
            }
            if ( !! cb) {
                cb(d);
            }
            $(bind).attr('src', c);
            $(target).prop('disabled', false).val(c);

            $('#' + id).replaceWith('<input id="' + id + '" type="file" name="files" data-target="' + target + '" url="' + url + '" onchange="frame.upload(this);" />');
        } catch(e) {
            $.tip('上传失败，服务器异常！' + e, false);
        }
    });
};

每次图片上传成功后，执行$('#' + id).replaceWith('<input id="' + id + '" type="file" name="files" data-target="' + target + '" url="' + url + '" onchange="frame.upload(this);" />'); 图片便可以多次上传。