[已解决]同一个页面中两个input，这两个元素对应的jq代码大部分是一样的，jq部分用了框架,不好分离提取相同部分,如何处理

Question

页面中有两个input，而且两个input分别是上传文件和文件夹，走的代码类似，id不一样
默认情况下这两个会混了，页面中存在两段以下代码，细微部分不同，效果也是会混的
该如何处理？jq部分用了框架，不好分离提取相同部分

<div id="upload-file" class="op-btn upload-file-btn">
<span class="icon-upload-alt"></span><span>{% trans "Upload"%}</span>
<input type="file" name="file" multiple />
</div>

<div id="upload-file2" class="op-btn upload-file-btn">
<span class="icon-upload-alt"></span><span>{% trans "xx "%}</span>
<input type="file" id="files" name="files[]" multiple webkitdirectory />
</div>

var cur_path = "{{path|escapejs}}";
$(function() {
    $.getScript('{{ MEDIA_URL }}js/jquery.fileupload.min.js', function () {
        var popup = $('#upload-file-dialog').addClass('fixed-upload-file-dialog');;
        var popup_height = '200px';
        popup.css({'height': popup_height}).data('height', popup_height);

        var fu_status = $('.status', popup),
            total_progress = $('.total-progress', popup),
            cancel_all_btn = $('.fileupload-buttonbar .cancel', popup),
            close_icon = $('.close', popup),
            saving_tip = $('.saving-tip', popup);

        var fu_status_ = {
            'uploading': "{% trans "File Uploading..." %}",
            'complete': "{% trans "File Upload complete" %}",
            'canceled': "{% trans "File Upload canceled" %}",
            'failed': "{% trans "File Upload failed" %}"
        };

        popup.fileupload({
            formData: {'parent_dir': cur_path},
            fileInput: $('#upload-file input'),
            paramName: 'file',
            // customize it for 'done'
            getFilesFromResponse: function (data) {
                if (data.result) {
                    return data.result;
                }
            },
            autoUpload:true,
            {% if max_upload_file_size %}
            maxFileSize: {{ max_upload_file_size }}, // in bytes
            {% endif %}
            maxNumberOfFiles: 500,
            sequentialUploads: true
        })
        .bind('fileuploadadd', function(e, data) {
           // var files = e.target.files; // FileList
            //for (var i = 0, f; f = files[i]; ++i) {
                //console.log(files[i].webkitRelativePath);
              //  $("#upload-file").data("dir",files[i].webkitRelativePath)
                
            //}
            //console.log(e);
            popup.removeClass('hide');
            cancel_all_btn.removeClass('hide');
            close_icon.addClass('hide');
        })
        .bind('fileuploadstart', function() {
            fu_status.html(fu_status_.uploading);
        })
        .bind('fileuploadsubmit', function(e, data) {
            if (data.files.length == 0) {
                return false;
            }
            var file = data.files[0];
            var xx = data.files[0].webkitRelativePath;
            //var yy = typeof(xx);
            //console.log(xx);
            
            // get url(token) for every file
            //if(file.error){
             //  console.log(file.error);
            //}
            if (!file.error) {
                $.ajax({
                    url: '{% url 'get_file_op_url' repo.id %}',
                    cache: false,
                    data: {
                        'op_type': 'upload',
                        'path': cur_path,
                        'dir-structure':xx,
                    },
                    dataType: 'json',
                    success: function(ret) {
                        data.url = ret['url'];
                        if(ret['path']!=null){
                            data.formData = {parent_dir:cur_path+ret['path']};
                        }
                        //console.log(ret['path']);
                        data.jqXHR = popup.fileupload('send', data);
                    },
                    error: function() {
                        file.error = "{% trans "Failed to get upload url" %}";
                    }
                });
                return false;
            }
        })
        .bind('fileuploadprogressall', function (e, data) {
            total_progress.html(parseInt(data.loaded / data.total * 100, 10) + '% ').removeClass('hide');
            //console.log(parseInt(data.loaded / data.total * 100, 10))
            if (data.loaded > 0 && data.loaded == data.total) {
                saving_tip.show();
            }
        })
        .bind('fileuploadstop', function() {
            setTimeout(function() { location.reload(true); }, 1000);
        })
        // after tpl has rendered
        .bind('fileuploadcompleted', function() { // 'done'
            if ($('.files .cancel', popup).length == 0) {
                saving_tip.hide();
                total_progress.addClass('hide');
                fu_status.html(fu_status_.complete);
            }
        })
        .bind('fileuploadfailed', function(e, data) { // 'fail'
            if ($('.files .cancel', popup).length == 0) {
                cancel_all_btn.addClass('hide');
                close_icon.removeClass('hide');
                total_progress.addClass('hide');
                saving_tip.hide();
                if (data.errorThrown == 'abort') { // 'cancel'
                    fu_status.html(fu_status_.canceled);
                } else { // 'error'
                    fu_status.html(fu_status_.failed);
                }
            }
        });

        // Enable iframe cross-domain access via redirect option:
        popup.fileupload(
            'option',
            'redirect',
            window.location.href.replace(/\/repo\/[-a-z0-9]{36}\/.*/, '{{ MEDIA_URL }}cors/result.html?%s')
        );
    });
});


// fold/unfold the dialog
$('#upload-file-dialog .fold-switch').click(function() {
    var popup = $('#upload-file-dialog');
    var full_ht = parseInt(popup.data('height'));
    var main_con = $('.fileupload-buttonbar, .table', popup);
    if (popup.height() == full_ht) {
        popup.height($('.hd', popup).outerHeight(true));
        main_con.addClass('hide');
    } else {
        popup.height(full_ht);
        main_con.removeClass('hide');
    }
});

$('#upload-file-dialog .close').click(function() {
    $('#upload-file-dialog').addClass('hide');
    $('#upload-file-dialog .files').empty();
});

window.locale = {
    "fileupload": {
        "errors": {
            "maxFileSize": "{% trans "File is too big" %}",
            "minFileSize": "{% trans "File is too small" %}",
            "acceptFileTypes": "{% trans "Filetype not allowed" %}",
            "maxNumberOfFiles": "{% trans "Max number of files exceeded" %}",
            "uploadedBytes": "{% trans "Uploaded bytes exceed file size" %}",
            "emptyResult": "{% trans "Empty file upload result" %}"
        },
        "error": "{% trans "Error" %}",
        "uploaded": "{% trans "uploaded" %}",
        "canceled": "{% trans "canceled" %}",
        "start": "{% trans "Start" %}",
        "cancel": "{% trans "Cancel" %}",
        "destroy": "{% trans "Delete" %}"
    }
};

Answer 1

$('#upload-file').click(xx)
$('#upload-file2').click(yy)

function yy() {
    var cur_path = "{{path|escapejs}}";
    $.getScript('{{ MEDIA_URL }}js/jquery.fileupload.min.js', function () {
        var popup = $('#upload-file-dialog').addClass('fixed-upload-file-dialog');;
        var popup_height = '200px';
        popup.css({'height': popup_height}).data('height', popup_height);

        var fu_status = $('.status', popup),
            total_progress = $('.total-progress', popup),
            cancel_all_btn = $('.fileupload-buttonbar .cancel', popup),
            close_icon = $('.close', popup),
            saving_tip = $('.saving-tip', popup);

        var fu_status_ = {
            'uploading': "{% trans "File Uploading..." %}",
            'complete': "{% trans "File Upload complete" %}",
            'canceled': "{% trans "File Upload canceled" %}",
            'failed': "{% trans "File Upload failed" %}"
        };

        popup.fileupload({
            formData: {'parent_dir': cur_path},
            fileInput: $('#upload-file2 input'),
            paramName: 'file',
            // customize it for 'done'
            getFilesFromResponse: function (data) {
                if (data.result) {
                    return data.result;
                }
            },
            autoUpload:true,
            {% if max_upload_file_size %}
            maxFileSize: {{ max_upload_file_size }}, // in bytes
            {% endif %}
            maxNumberOfFiles: 500,
            sequentialUploads: true
        })
        .bind('fileuploadadd', function(e, data) {
           // var files = e.target.files; // FileList
            //for (var i = 0, f; f = files[i]; ++i) {
                //console.log(files[i].webkitRelativePath);
              //  $("#upload-file").data("dir",files[i].webkitRelativePath)
                
            //}
            //console.log(e);
            popup.removeClass('hide');
            cancel_all_btn.removeClass('hide');
            close_icon.addClass('hide');
        })
        .bind('fileuploadstart', function() {
            fu_status.html(fu_status_.uploading);
        })
        .bind('fileuploadsubmit', function(e, data) {
            if (data.files.length == 0) {
                return false;
            }
            var file = data.files[0];
            var xx = data.files[0].webkitRelativePath;
            //var yy = typeof(xx);
            //console.log(xx);
            
            // get url(token) for every file
            //if(file.error){
             //  console.log(file.error);
            //}
            if (!file.error) {
                $.ajax({
                    url: '{% url 'get_file_op_url' repo.id %}',
                    cache: false,
                    data: {
                        'op_type': 'upload',
                        'path': cur_path,
                        'dir-structure':xx,
                    },
                    dataType: 'json',
                    success: function(ret) {
                        data.url = ret['url'];
                        if(ret['path']!=null){
                            data.formData = {parent_dir:cur_path+ret['path']};
                        }
                        //console.log(ret['path']);
                        data.jqXHR = popup.fileupload('send', data);
                    },
                    error: function() {
                        file.error = "{% trans "Failed to get upload url" %}";
                    }
                });
                return false;
            }
        })
        .bind('fileuploadprogressall', function (e, data) {
            total_progress.html(parseInt(data.loaded / data.total * 100, 10) + '% ').removeClass('hide');
            //console.log(parseInt(data.loaded / data.total * 100, 10))
            if (data.loaded > 0 && data.loaded == data.total) {
                saving_tip.show();
            }
        })
        .bind('fileuploadstop', function() {
            setTimeout(function() { location.reload(true); }, 1000);
        })
        // after tpl has rendered
        .bind('fileuploadcompleted', function() { // 'done'
            if ($('.files .cancel', popup).length == 0) {
                saving_tip.hide();
                total_progress.addClass('hide');
                fu_status.html(fu_status_.complete);
            }
        })
        .bind('fileuploadfailed', function(e, data) { // 'fail'
            if ($('.files .cancel', popup).length == 0) {
                cancel_all_btn.addClass('hide');
                close_icon.removeClass('hide');
                total_progress.addClass('hide');
                saving_tip.hide();
                if (data.errorThrown == 'abort') { // 'cancel'
                    fu_status.html(fu_status_.canceled);
                } else { // 'error'
                    fu_status.html(fu_status_.failed);
                }
            }
        });

        // Enable iframe cross-domain access via redirect option:
        popup.fileupload(
            'option',
            'redirect',
            window.location.href.replace(/\/repo\/[-a-z0-9]{36}\/.*/, '{{ MEDIA_URL }}cors/result.html?%s')
        );
    });
}







function xx() {
    var cur_path = "{{path|escapejs}}";
    $.getScript('{{ MEDIA_URL }}js/jquery.fileupload.min.js', function () {
        var popup = $('#upload-file-dialog').addClass('fixed-upload-file-dialog');;
        var popup_height = '200px';
        popup.css({'height': popup_height}).data('height', popup_height);

        var fu_status = $('.status', popup),
            total_progress = $('.total-progress', popup),
            cancel_all_btn = $('.fileupload-buttonbar .cancel', popup),
            close_icon = $('.close', popup),
            saving_tip = $('.saving-tip', popup);

        var fu_status_ = {
            'uploading': "{% trans "File Uploading..." %}",
            'complete': "{% trans "File Upload complete" %}",
            'canceled': "{% trans "File Upload canceled" %}",
            'failed': "{% trans "File Upload failed" %}"
        };

        popup.fileupload({
            formData: {'parent_dir': cur_path},
            fileInput: $('#upload-file input'),
            paramName: 'file',
            // customize it for 'done'
            getFilesFromResponse: function (data) {
                if (data.result) {
                    return data.result;
                }
            },
            autoUpload:true,
            {% if max_upload_file_size %}
            maxFileSize: {{ max_upload_file_size }}, // in bytes
            {% endif %}
            maxNumberOfFiles: 500,
            sequentialUploads: true
        })
        .bind('fileuploadadd', function(e, data) {
           // var files = e.target.files; // FileList
            //for (var i = 0, f; f = files[i]; ++i) {
                //console.log(files[i].webkitRelativePath);
              //  $("#upload-file").data("dir",files[i].webkitRelativePath)
                
            //}
            //console.log(e);
            popup.removeClass('hide');
            cancel_all_btn.removeClass('hide');
            close_icon.addClass('hide');
        })
        .bind('fileuploadstart', function() {
            fu_status.html(fu_status_.uploading);
        })
        .bind('fileuploadsubmit', function(e, data) {
            if (data.files.length == 0) {
                return false;
            }
            var file = data.files[0];
            var xx = data.files[0].webkitRelativePath;
            //var yy = typeof(xx);
            //console.log(xx);
            
            // get url(token) for every file
            //if(file.error){
             //  console.log(file.error);
            //}
            if (!file.error) {
                $.ajax({
                    url: '{% url 'get_file_op_url' repo.id %}',
                    cache: false,
                    data: {
                        'op_type': 'upload',
                        'path': cur_path,
                        'dir-structure':xx,
                    },
                    dataType: 'json',
                    success: function(ret) {
                        data.url = ret['url'];
                        if(ret['path']!=null){
                            data.formData = {parent_dir:cur_path+ret['path']};
                        }
                        //console.log(ret['path']);
                        data.jqXHR = popup.fileupload('send', data);
                    },
                    error: function() {
                        file.error = "{% trans "Failed to get upload url" %}";
                    }
                });
                return false;
            }
        })
        .bind('fileuploadprogressall', function (e, data) {
            total_progress.html(parseInt(data.loaded / data.total * 100, 10) + '% ').removeClass('hide');
            //console.log(parseInt(data.loaded / data.total * 100, 10))
            if (data.loaded > 0 && data.loaded == data.total) {
                saving_tip.show();
            }
        })
        .bind('fileuploadstop', function() {
            setTimeout(function() { location.reload(true); }, 1000);
        })
        // after tpl has rendered
        .bind('fileuploadcompleted', function() { // 'done'
            if ($('.files .cancel', popup).length == 0) {
                saving_tip.hide();
                total_progress.addClass('hide');
                fu_status.html(fu_status_.complete);
            }
        })
        .bind('fileuploadfailed', function(e, data) { // 'fail'
            if ($('.files .cancel', popup).length == 0) {
                cancel_all_btn.addClass('hide');
                close_icon.removeClass('hide');
                total_progress.addClass('hide');
                saving_tip.hide();
                if (data.errorThrown == 'abort') { // 'cancel'
                    fu_status.html(fu_status_.canceled);
                } else { // 'error'
                    fu_status.html(fu_status_.failed);
                }
            }
        });

        // Enable iframe cross-domain access via redirect option:
        popup.fileupload(
            'option',
            'redirect',
            window.location.href.replace(/\/repo\/[-a-z0-9]{36}\/.*/, '{{ MEDIA_URL }}cors/result.html?%s')
        );
    });
}