jquery通过插件添加文件

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

        添加评语并传递到后台
    */
    //通过点击事件来进行添加、问问学姐J-add类的问题
    $(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>