jquery通过插件添加文件

女爷i 2024-03-22 12:54 13阅读 0赞

## jquery通过插件添加文件 ##

先到网上去下载相关的插件，再引入，在使用，用html的mode=fade进行使用

### 添加评语并传递到后台 ###

*      */
            //通过点击事件来进行添加
            $(document).on('click', '.J_add', function(e){
                //通过点击事件，用target获得点击对象，用parents祖先函数获得到tr、用find找到子孙元素、用val（）获取到select选中的值
               var
                    buttonTarget=$(e.target),
                    tr = $(e.target).parents('tr'),
                    id = $(tr).attr('data-id'),
                    studentName=$(tr).attr('data-number'),
                    evaluationWord=$(tr).find("select").val(),
                    person; 
                    if(evaluationWord==0){
                        Alert("请选择添加的评语");
                    }
                    else{
                    //改变按钮颜色，后台合页面后success里面去
                    buttonTarget.css("background-color", "#1AA094");
                    //保存对象进行传递
                    person = {
                        'id': id,
                        'studentName': studentName,
                        'evaluationWord': evaluationWord
                
                    };
                    $.ajax({
                        //去到url.js里面找到url和type
                    type: jQuery.url.studentEvaluation.evaluationAdd.type,
                    url: jQuery.url.studentEvaluation.evaluationAdd.url,
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    data: person,     //JSON.stringify
                    dataType: "json",
                    success: function (rs) {
                        if( rs.code == 0){                
                            buttonTarget.css("background-color", "#1AA094");
                        }else{                
                            Alert('提示信息', '添加失败，服务器连接!错误');
                        }
                    },
                    error: function (message) {
                        $('#addOwner').modal('hide');
                        Alert('提示信息', '操作失败，请求失败!');
                    }
                });
                }
              
            });

### html代码： ###

*      
            <div class="modal fade" id="J_addCouDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog " role="document" style="width: 880px;">
                    <div class="modal-content ">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title">新增</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal J_addForm" id="uploadForm" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">图片：</label>
                                    <input id="file" type="file" name="file" class="file"> 
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">标题：</label>
                                    <div class="panel-group">
                                        <input id="editable-select2" class="form-control J_title w190" name="news_title"/>
                                    </div> 
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">内容：</label>
                                    <div class="panel-group">
                                        <textarea name="work_content" class="J_workContent" id="J_workContentId" cols="30" rows="5"></textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary J_addCouDlg" id="upload">发布</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="modal fade" id="J_addCouEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <input type="hidden" class='hiddenCouEdit' value=''>
                <div class="modal-dialog " role="document" style="width: 550px;">
                    <div class="modal-content ">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title">编辑</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal J_editForm " id="addSee">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">标题</label>
                                    <div class="col-sm-2">
                                        <input id="editable-select2 " class="form-control J_courseWork_name w190" name="courseWork_name" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">作业内容</label>
                                    <div class="col-sm-2">
                                        <textarea id="editable-select2 " class="form-control J_courseWork_tea w190" name="courseWork_tea" ></textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary J_addConEDit">确定</button>
                        </div>
                    </div>
                </div>
            </div>