基于firefox实现ajax图片上传

图片文件上传，有很多种协议的，这次主要讲的是“Content-Type：multipart/form-data;”的形式。

在工作中前台一些静态文件是通过FTL模版系统，前台页面通过SSI进行引用的，项目开发的时候就需要生成大量的静态SHTML文件了，本来觉得应该是后台的事情，可是自从我进这公司，这快东西就交给了前端~~我表示无语，没办法就按着习惯来吧，但我是个懒人，就想着能不能通过ajax提交呢

基于平时对MDN的翻阅，今天主要是FormData这个对象解决多文件上传的协议。

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData

似乎一切都完美了，但是在File方法，只能在chrome级别上才能运行。图片上传没办法实现，一般普通文件可以通过Blob对象实现

下面通过了一些方法来实现，一个探索过程

1.找了半天，URL转为File对象的方法，都失败了。。。

2.HTML5 File方向

a.通过HTML5 File的例子，开始

https://developer.mozilla.org/en-US/docs/DOM/FileReader

在例子里面，打印 oFREvent.target.result 只是找到了"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."

原来是base64编码的数据

看到上边的编码数据，就想到Blob对象是不是支持啊，代码如下

var fd = new FormData();
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg"}));
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg;base64"}));

b..想到了base64是编码过了，通过方法解码下是不是可以

网上找了一段base64编码解码的例子，套了一下

fd.append('my-file', new Blob([new Base64().decode('/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...')],{type:"image/jpeg"}));

抓包发现，正常传输文件和ajax数据不一样，那肯定是失败了

3.浏览器页面级别为了安全，看来选择文件的操作是要自己手动下了

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects

代码如下:

fd.append('my-file',document.querySelector(Selector).files[0])

其实一开始还是被File api给误导了，一直以为是页面级别的

忽然发现，最后一个地址里面最上面就是用的这种方法。。看来还是看东西不认真，走了些弯路。

后记，通过向油猴插件那样，加入函数，支持chrome级别的File方法，我们就可以方便的上传照片了。

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

    PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

    昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果 1.先使用ajaxfileupload插件做异步上传.这个地方我本来想做个上传进度的效果,但技术有限失败了.上传按钮我还做了一个文件大小的限制,但是由于浏览器兼容性的问题,不完美在IE6--IE9之间还有很多问题需要解决 getFileSize函数是用于判断文件大小的函数 复制代码 代码如下: function getFileSize(fileName) {                var byteSize = 0;     

  • 使用ajaxfileupload.js实现ajax上传文件php版

    无论是PHP,还是其他的服务端脚本都提供了文件上传功能,实现起来也比较简单.而利用JavaScript来配合,即可实现Ajax方式的文件上传.虽然jQuery本身没有提供这样的简化函数,但有不少插件可以实现.其中,Phpletter.com提供的ajaxfileupload.js是一个轻量的插件,而且编写方式与jQuery提供的全局方法$.post()非常相似,简单易用. 不过,该插件实在太简化了,除了可提供需上传文件的路径外,也就不能传递额外的值到后台服务端.所以,我修改了一下该脚本,增加个一

  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

    本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

  • PHP+jQuery+Ajax实现多图片上传效果

    PHP+jQuery+Ajax实现多图片上传效果

    今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

  • asp.net+ajaxfileupload.js 实现文件异步上传代码分享

    由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码 代码如下: /*修改头像*/      //上传      function _sc() {          $(".ckfile").html("").css("color", "#535353");          $("#_userImgPath").val("");     

  • 自己动手打造ajax图片上传(网上没有的)

    今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的.于是就自己动手写了一个. 方法1,仅使用jquery代码,不用第三方插件.代码如下 <p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /&g

  • 使用AjaxFileUpload.js实现异步文件上传示例

    ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: 复制代码 代码如下: <input type="file" name="upload" hidden="hidden" id="file_u

  • Ajax上传实现根据服务器端返回数据进行js处理的方法

    本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法.分享给大家供大家参考.具体如下: Ajax上传说白了还是使用form表单提交,在当前页面加一个iframe,将提交的内容跳转到iframe中,造成一种页面无刷新的错觉. 以前也做过上传,基本是是使用commons-fileupload组件,基本的步骤是使用servlet处理完上传之后,使用PrintWrite的对象实例输出显示内容,可以是直接输出内容,也可以是输出script进行操作如 复制代码 代码如下: response.

  • 基于firefox实现ajax图片上传

    图片文件上传,有很多种协议的,这次主要讲的是"Content-Type:multipart/form-data;"的形式. 在工作中前台一些静态文件是通过FTL模版系统,前台页面通过SSI进行引用的,项目开发的时候就需要生成大量的静态SHTML文件了,本来觉得应该是后台的事情,可是自从我进这公司,这快东西就交给了前端~~我表示无语,没办法就按着习惯来吧,但我是个懒人,就想着能不能通过ajax提交呢 基于平时对MDN的翻阅,今天主要是FormData这个对象解决多文件上传的协议. htt

  • 基于ThinkPHP5.0实现图片上传插件

    基于ThinkPHP5.0实现图片上传插件

    效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间. 一.下载附件 地址:链接: https://pan.baidu.com/s/1nuQ4NgP  密码: 4pbu 二.将附件中的CropAvatar.php放到自己程序目录extend/org目录下,如果遇到 exif_imagetype 错误,需要打开 php.ini 中的 extension=php_exif.dll 三.common.php公共函数 找到应用程序目录下的com

  • ajax图片上传，图片异步上传，更新实例

    最近在研究ajax图片上传,图片异步上传,更新,留作参考. 直接上源码吧: js源码: /// <reference path="jquery-1.8.3.js" /> /// <reference path="ajaxForm/jquery.form.js" /> /*! * jQuery upload * 用于上传单个文件,上传成功后,返回文件路径. * 本插件依赖jQuery,jquery.form 请在使用时引入依赖的文件 * * D

  • 基于Node的React图片上传组件实现实例代码

    基于Node的React图片上传组件实现实例代码

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /

  • 基于vue-upload-component封装一个图片上传组件的示例

    需求分析 业务要求,需要一个图片上传控件,需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发. 预览 因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要

  • 一个伪ajax图片上传代码实现示例

    复制代码 代码如下: <?php if($_FILES){ ?> <script> window.parent.ajaxUploadPicture.uploadCallback('http://img0.bdstatic.com/img/image/5099213b07eca8065380ce7f75e95dda144ad348269.jpg'); </script> <?php die; } ?> <!DOCTYPE html> <htm

  • php+ajax+h5实现图片上传功能

    本文实例为大家分享了php实现ajax图片上传的具体代码,供大家参考,具体内容如下 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="__PUBLIC__

  • 基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

    基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

    我的风格,先给大家展示下效果图,具体效果图如下所示,如果大家感觉还不错很满意请参考实现代码. HTML的代码: <form id="ff" runat="server" method="post"> <div id="content" style="margin-left:50px;"> <table style="width:300px;" id=&quo

随机推荐