Biegral Blog

html的ajax上传文件

      html中经常会有上传文件的功能。

      常见的实现方法有，form标题提交上传。 

       ajax上传。

    ajxa上传比form上传体验效果更好，扩展性更改，界面与逻辑耦合度低。

    实现思路：

    1、本地选择文件进

    2、本地文件选择成功后显示本地文件路径，

    3、获取本地文件的流，放入到formData中

    4、通过ajax将本地文件上传到服务器，服务器接收文件流，保存到本地，

    5、服务器保存成功则服务器将保存到本地的位置返回给前端，否则返回上传文件失败

  实现代码：

  upload.html：

  <div class="treamitem">
                        <label class="label" >战队图标:</label>
                        <input class="treamiteminput browsetreaminput" type="text" id="browsetreaminput"  readonly="readonly" />
                        <input class="hide" id="treamitemFile" type="file"  />
                        <div class="browsetreamwrap" id="selectHeadimg">
                            <div class="browsetreambtn">浏览</div>