zoukankan      html  css  js  c++  java
  • 前端图片上传的几种方式

    一、.html表单上传(不推荐)

    最传统的图片上传方式是form表单上传,使用form表单的input[type=”file”]控件,打开系统的文件选择对话框,从而达到选择文件并上传的目的。

    web上传图片的几种方法

    form表单上传。表单上传需要注意以下几点:

    1、.提供form表单,method必须是post。

    2、form表单的enctype必须是multipart/form-data。

    enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码。HTML表单如何打包数据文件是由enctype这个属性决定的。

    enctype有以下几种取值:

    application/x-www-form-urlencoded:在发送前编码所有字符(默认)(空格被编码为’+’,特殊字符被编码为ASCII十六进制字符)。
    multipart/form-data:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
    text/plain:空格转换为 “+” 加号,但不对特殊字符编码。
    默认enctype=application/x-www-form-urlencoded,所以表单的内容会按URL规则编码,  

    (3).提供input type="file"上传输入域。

    浏览器请求体如下:下图为请求体

    web上传图片的几种方法

     

    二、jquery---ajax上传

    ajax和FormData可实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的

    FormData接口。通过FormData对象可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同。

    web上传图片的几种方法

    ajax无刷新上传

    Ajax无刷新上传的方式,本质上与表单上传无异,只是把表单里的内容提出来采用ajax提交,并且由前端决定请求结果回传后的展示结果。

    三、web  文件上传插件  Web Uploader   ----  支持多图上传,大文件上传,压缩图片上传,预览等

      官网 : http://fex.baidu.com/webuploader/

      官网已经有

    各类插件上传

    当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等,这时传统的表单上传很难实现这些功能,我们可以借助现有插件完成。

    如百度上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等,大家可根据项目实际需求选择适合的插件。

  • 相关阅读:
    洛谷 P4001 [ICPC-Beijing 2006]狼抓兔子
    杂题20201201
    杂题20210103
    杂题20201010
    杂题20200928
    ACL1 Contest 1 简要题解
    杂题20200906
    杂题20200623
    USACO2020DEC Gold/Platinum 解题报告
    CSP-S2020游记
  • 原文地址:https://www.cnblogs.com/qqing/p/9035138.html
Copyright © 2011-2022 走看看