文件上传功能实现

效果图.png

<div align="center" class="div_row">
  <form method="post" action="{:url('file/editAct')}">
    <table width="674" cellpadding="3" cellspacing="1">
      <tr>
        <td width="90" nowrap="nowrap"><div align="center">文件名</div></td>
        <td nowrap="nowrap"><div align="center">
          <input name="file_name" type="text" id="file_name" style="width:99%;" value="{$file.file_name}" {if empty($file.uid)} readonly {/if}/>
        </div></td>
        <td width="90" nowrap="nowrap"><div align="center">文件大小</div></td>
        <td nowrap="nowrap" width="100"><div align="center">
          <input name="file_size" type="text" id="file_size" style="width:90%;" value="{$file.file_size}"; readonly/>
          <input name="file_path" type="hidden" id="file_path" style="width:90%;" value="{$file.file_path}"; readonly/>
        </div></td>
      </tr>
      <tr>
        <td nowrap="nowrap"><div align="center">文件描述</div></td>
        <td nowrap="nowrap" colspan="3"><div align="center">
          <textarea name="description" rows="6" id="description" style="width:99%;">{$file.description}</textarea>
        </div></td>
      </tr>
      <tr>
          <td colspan="4" nowrap="nowrap"><div align="center">
            <input name="uid" type="hidden" id="uid" value="{$file.uid}" />
            <input type="submit" name="submit" id="button" value="确定编辑"/>
          </div></td>
      </tr>
    </table>
  </form>
</div>

var htmlModalFile = [
    '<div class="modal" id="modal-upload" >',
    '   <div class="modal-dialog" style="top:160px;text-align:center;">',
    '       <div class="modal-content" >',
    '           <div class="modal-header" >',
    '               <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>',
    '               <h4 class="modal-title">选择文件上传</h4>',
    '           </div>',
    '           <div class="modal-body" style="text-align:left;margin-top:10px;">',
    '               <iframe name="myframe" src="" frameborder="0" style="display:none;"></iframe>',
    '               <form name="form-file" id="form-file" method="post" enctype="multipart/form-data" action="upload" target="myframe">',
    '                   <div style="text-align:left;">',
    '                       <label>存放路径:</label>',
    '                       <select name="save_type" id="save_type" style="width:100px;">',
    '                           <option value="file/attach">file/attach</option>',
    '                           <option value="file/paper">file/paper</option>',
    '                           <option value="file/default">file/default</option>',
    '                       </select>',
    '                   </div>',
    '                   <div style="text-align:left;margin-top:10px;"">',
    '                       <label>存放路径:</label>',
    '                       <input type="file" id="file" name="file" style="width:250px;height:25px;;background:white">',
    '                   </div>',
    '               </form>',
    '               <button data-dismiss="modal" id="btn_upload" style="position:absolute;right:10px;top:50%;height:100%;width:70px;height: 70px;margin-top: -35px">确定</button>',
    '           </div>',
    '       </div>',
    '   </div>',
    '</div>',
].join('');

$(function() {
    var modalFile = $(htmlModalFile);

    $('body').append(modalFile);

    $("#file_name").click(function () {
        $("#modal-upload").modal("toggle");
    });
    $("#btn_upload", modalFile).on("click", function () {
        var formData = new FormData($("#form-file")[0]);
        $.ajax({
            url: '/admin/file/upload',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                var par1 = window.document.getElementById('file_name');
                $(par1).attr('value', data['name']);
                var par2 = window.document.getElementById('file_size');
                $(par2).attr('value', data['size']);
                var save_type = $('#save_type option:selected') .val();
                $("#file_path").attr('value' ,save_type);
                alert(data['msg']);
            },
            error: function (data) {
                alert('ajax请求失败');
            }
        });
        return false;
    });
});

 /*
     * 保存文件基本信息
     */
    public function editAct(Request $request)
    {
        $data = $this->getParams(array('uid', 'file_name', 'description', 'file_size', 'file_path'));
        $data['edit_time'] = time();
        $data['app_name'] = get_app_name();
        if (!empty($data['uid'])) {
            $origin_data = Db::table('h_file')->where(['uid' => $data['uid']])->find();
            if ($origin_data['file_name'] != $data['file_name']) {
                $origin_name = get_down_path($origin_data['file_name'], $origin_data['file_path']);
                $new_name = get_down_path($data['file_name'], $data['file_path']);
                rename($origin_name, $new_name);
            }
        }
        if (!empty($data['uid'])) {
            Db::table('h_file')->where('uid', $data['uid'])->update($data);
            return $this->success('文件编辑成功！', url('file/edit', ['uid' => $data['uid']]));
        } else {
            $data['uid'] = create_uuid();
            Db::table('h_file')->insert($data);
            return $this->success('文件添加成功！', url('file/index'));
        }
    }

    public function upload(Request $request)
    {
        // 获取表单上传文件
        $file = $request->file('file');
        $save_type = $request->param('save_type');
        if (empty($file)) {
            return json(array('code' => -1, 'msg' => '请选择上传文件'));
        }
        $name = $file->getInfo('name');
        $file_path = get_down_path($save_type, '');
        if (file_exists(join_url($file_path, $name))) {
            return json(array('code' => -3, 'msg' => '文件已经存在','name' => $file->getInfo('name'),'size' => $file->getInfo('size')));
        }
        $info = $file->move($file_path, '');
        if ($info) {
            $file_info = $info->getInfo();
            return json(array('code' => 0, 'msg' => '文件上传成功', 'name' => $file_info['name'], 'size' => $file_info['size']));
        } else {
            // 上传失败获取错误信息`
            return json(array('code' => -2, 'msg' => '文件上传失败'));
        }
    }