AngualrJs 最新 文件图片上传教程1：Client-View

<div class="baseinfomanage-modal">
  <div class="modal-header">
    <h1>{{vm.method}}</h1>
  </div>
  <div class="modal-body col-md-12">
    <form name="vm.womenInformationManagementForm" class="form-horizontal" novalidate>
      <fieldset ng-disabled="vm.disabled">
        <!-- row 1 标题-->
        <div class="row clearfix">
          <div class="col-xs-12 column" style="margin-top: 0px;margin-bottom: 0px;">
            <div class="form-group" show-errors>
              <div class="col-xs-12">
                <label class="control-label"
                       for="title">标题</label>
                <input name="title"
                       type="text"
                       ng-model="vm.womenInformationManagementData.title"
                       id="title"
                       class="form-control"
                       placeholder=""
                       required autofocus>
                <div ng-messages="vm.womenInformationManagementForm.title.$error" role="alert">
                  <p class="help-block error-text"
                     ng-message="required">请输入标题.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--第2行-->
        <div class="row clearfix">
          <div class="col-xs-12 column" style="margin-top: 0px;margin-bottom: 0px;">
            <div class="form-group row">
              <div class="col-xs-12">
                <label>类型</label>
                <select class="form-control"
                        ng-model="vm.womenInformationManagementData.type"
                        ng-options="cv.id as cv.name for cv in cvs"
                        required
                >
                </select>
                <div ng-messages="vm.womenInformationManagementForm.name.$error" role="alert">
                  <p class="help-block error-text" ng-message="required">请选择类型.</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- row 3 照片-->
        <div class="row clearfix">
          <div class="col-xs-12 column" style="margin-top: 0px;margin-bottom: 0px;">
            <div class="form-group">
              <div class="col-xs-12">
                <label class="control-label">活动照片</label>
                <div class="form-group text-center" ng-show="vm.showphoto===1 || vm.filePhoto1Selected">
                <img ngf-src="vm.filePhoto1Selected ? vm.photoFile : vm.womenInformationManagementData.photo" alt=""
                     class=" img-thumbnail women-photo-picture" ngf-drop>
              </div>
                <div ng-show="vm.loading1" class="form-group text-center">
                  <img ng-src="/modules/core/client/img/loaders/loader.gif" height="50" width="50"
                       alt="Loading1 image...">
                </div>
                <div ng-show="true" class="text-center form-group">
                  <button class="btn btn-default btn-file"
                          ngf-select="(vm.filePhoto1Selected = true) && (vm.loading1 = false)" ng-model="vm.photoFile"
                          accept="image/*" ngf-before-model-change="vm.loading1 = true" ngf-resize="{width: 400}"
                          ngf-resize-if="$width > 1920 || $height > 1080">点击选择照片
                  </button>
                </div>
                <div ng-show="false" class="progress text-center">
                  <div class="progress-bar" role="progressbar" aria-valuenow="{{vm.progress1}}" aria-valuemin="0"
                       aria-valuemax="100" style="width:{{vm.progress}}%" ng-bind="vm.progress1 + '%'">
                    <span class="sr-only">{{vm.progress1}}% </span>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

        <!-- row 2 内容unused-->
        <!--
         <div class="row clearfix">
           <div class="col-xs-12 column" style="margin-top: 0px;margin-bottom: 0px;">
             <div class="form-group" show-errors>
               <div class="col-xs-12">
                 <label class="control-label"
                        for="file_content">内容</label>
                 <textarea name="file_content"
                           contenteditable
                           type="text"
                           ng-model="vm.womenInformationManagementData.file_content"
                           id="file_content"
                           class="form-control"
                           style="height: 100px;"
                           placeholder=""
                           required autofocus>
                   </textarea>
                 <div ng-messages="vm.womenInformationManagementForm.file_content.$error" role="alert">
                   <p class="help-block error-text"
                      ng-message="required">请输入内容.</p>
                 </div>
               </div>
             </div>
           </div>
         </div>
         -->

        <!----第3行 上传文件---->
        <div class="row clearfix">
          <div class="col-xs-12 column">
            <div class="form-group col-xs-3 column">
              <label class="control-label">上传文件</label>
            </div>
            <div class="col-xs-6 column text-center" >
              <label>{{vm.fileSelected ? vm.fileFile.name : vm.womenInformationManagementData.file_path}}</label>
            </div>
            <div class="col-xs-3 column text-right" >
              <button class="btn btn-default btn-file"
                      ngf-select="(vm.fileSelected = true)"
                      ng-model="vm.fileFile"
                      accept="application/msword">点击选择文件
              </button>
            </div>
          </div>
        </div>

        <!-- row 4 时间-->
        <div class="row clearfix">
          <div class="col-xs-12 column" style="margin-top: 0px;margin-bottom: 0px;">
            <div class="form-group" show-errors>
              <div class="col-xs-12">
                <label class="control-label"
                       for="time_update">时间</label>
                <p class="input-group">
                  <input name="time_update"
                         type="text"
                         ng-model="vm.womenInformationManagementData.time_update"
                         id="time_update"
                         class="form-control"
                         uib-datepicker-popup
                         is-open="popup1.opened"
                         datepicker-options="inlineOptions"
                         ng-required="true"
                         current-text="今天"
                         clear-text="清空"
                         close-text="关闭"
                         placeholder="1900-01-01"
                         required autofocus/>
                  <span class="input-group-btn">
                      <button type="button"
                              class="btn btn-default"
                              ng-click="open1()">
                        <i class="glyphicon glyphicon-calendar"></i>
                      </button>
                 </span>
                </p>
                <div ng-messages="vm.womenInformationManagementForm.time_update.$error" role="alert">
                  <p class="help-block error-text"
                     ng-message="required">请输入时间.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- row5 备注-->
        <div class="row clearfix">
          <div class="col-xs-12 column" style="margin-top: 0px;margin-bottom: 0px;">
            <div class="form-group">
              <div class="col-xs-12">
                <label class="control-label"
                       for="remark">备注</label>
                <input name="remark"
                       type="text"
                       ng-model="vm.womenInformationManagementData.remark"
                       id="remark"
                       class="form-control"
                       placeholder=""
                       required autofocus/>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <!-- row 6 下载文件-->
      <fieldset ng-disabled="vm.disableddown === 1">
        <div class="row clearfix" ng-show="vm.ifdown">
          <div class="col-xs-12 column" style="margin-top: 0px;margin-bottom: 0px;">
            <div class="form-group">
              <div class="col-xs-2">
                <label class="control-label">文件</label>
              </div>
              <div class="col-xs-8">
                <label class="control-label">{{vm.womenInformationManagementData.file_path}}</label>
              </div>
              <div class="col-xs-2">
                <button class="btn btn-primary"
                        style="width: 100%"
                        ng-click="vm.downFile()">文件下载
                </button>
              </div>
            </div>
          </div>
        </div>
      </fieldset>

    </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary"
            style="width: 100px"
            ng-if="!vm.disabled"
            ng-click="vm.ok(vm.womenInformationManagementForm.$valid)">确定
    </button>
    <button class="btn btn-warning"
            style="width: 100px"
            ng-click="vm.cancel()">取消
    </button>
  </div>
</div>