移动端压缩并ajax上传图片解决方案

1.需求

做一个前端可压缩并且上传图片到后台的功能

2.使用组件

用到的主要是jq和LocalResizeIMG这2个库

3.使用方法

a.引入脚本文件

<script type=‘text/javascript‘ src=‘js/jquery-2.0.3.min.js‘></script>
<script type=‘text/javascript‘ src=‘js/LocalResizeIMG.js‘></script>
<script type=‘text/javascript‘ src=‘js/patch/mobileBUGFix.mini.js‘></script>

b.编写html

<div style="width:100%;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
  <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片"   style="display:none;" />
  <div class="imglist"></div>
  <a href="javascript:void(0);" onclick="uploadphoto.click()" class="uploadbtn">点击上传文件</a>
</div>

c.编写css

body{font-family:"微软雅黑"}
*{margin: 0;padding: 0;    }
.uploadbtn{ display:block;height:40px; line-height:40px; color:#333; text-align:center; width:100%; background:#f2f2f2; text-decoration:none; }
.imglist{min-height:200px;margin:10px;}
.imglist img{width:100%;}

d.执行上传代码

<script type="text/javascript">
$(document).ready(function(e) {
   $(‘#uploadphoto‘).localResizeIMG({
      //要压缩到的宽度
      width: 1900,
      quality: 1,
      success: function (result) {
      // result.clearBase64是base64的数据
          var submitData={
                base64_string:result.clearBase64,
            }; 

        $.ajax({
           type: "POST",
           url: "upload.php",
           data: submitData,
           dataType:"json",
           success: function(data){
             if (0 == data.status)
             {
                alert(data.content);
                return false;
             }
             else
             {
                alert(data.content);
                var attstr= ‘<img id=‘+‘element_id‘+‘ src="‘+data.url+‘">‘;
                $(".imglist").append(attstr);
                return false;
             }
           },
            complete :function(XMLHttpRequest, textStatus){
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败
               alert(XMLHttpRequest.status);
               alert(XMLHttpRequest.readyState);
               alert(textStatus);
            }
        });
      }
  });
});
</script>

e.后端php接收数据并处理。

后端会接收前端的base64数据,并base64解码保存在images文件夹下面

<?php

    $base64_string = $_POST[‘base64_string‘];

    $savename = uniqid().‘.jpeg‘;//localResizeIMG压缩后的图片都是jpeg格式

    $savepath = ‘images/‘.$savename; 

    $image = base64_to_img( $base64_string, $savepath );

    if($image){
        echo ‘{"status":1,"content":"图片上传成功,请用手指轻触要做为头像的区域","url":"‘.$image.‘"}‘;
    }else{
        echo ‘{"status":0,"content":"上传失败"}‘;
    } 

    function base64_to_img( $base64_string, $output_file ) {
        $ifp = fopen( $output_file, "wb" );
        fwrite( $ifp, base64_decode( $base64_string) );
        fclose( $ifp );
        return( $output_file );
    }
?>

4.总结

思路就是前端把图片base64编码,再传到后台进行base64解码并保存把图片返回给客户端并在服务端保存一份。(需在服务器下运行代码)

参考资料:http://www.cnblogs.com/manongxiaobing/p/4720568.html

时间: 2024-10-26 16:24:59

移动端压缩并ajax上传图片解决方案的相关文章

asp.net core 通过ajax上传图片及wangEditor图片上传

asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端代码如下: @Html.AntiForgeryToken() @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} <div> <form id="uploadForm">

ajax上传图片文件

这里用的是一个隐藏的iframe,这样可以让form表单提交到这个iframe里面,用户就看不到页面的刷新了 前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法也有利用flash的.flash确实是个好方法 但是不是每个人都会flash的而且下载下来现成的方法要做修改也不是件易事,且文件相对较大. 最后只好模拟iframe来实现.发现相当的简单.

使用Ajax上传图片到服务器(不刷新页面)

有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这里还需要引用Jquery跟Jquery.form.js两个文件,没看到上传附件在哪里咯,需要的朋友可以给我留言哈 前台代码 Default2.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&

关于使用ajax上传图片问题

今天需要做一个上传图片的功能,由于框架里面没有带,上网搜了下.看到有spring mvc的图片上传,而且有例子,刚好是自己需要的,直接粘贴复制下.参考: http://blog.csdn.net/luckey_zh/article/details/46867957# 很简单,使用了commons-upload和commons-io包,配置文件位置后,页面form表单这几设置,然后就好了. 配置完后,自己运行却发现,上传报错了: org.apache.tomcat.util.http.fileup

Ajax 上传图片并预览

1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>图片上传 | cookie</title> 6 </head> 7 <body

BBS功能之Ajax上传图片

1. 先设置路由 url(r'^upload_img', upload_img), 2. 建立函数 def upload(request): return render(request,'upload.html') 3. 编写upload.html //这次我们先学jquery方式 <body> <h1>上传图片</h1> <input type="file" name="fafafa"> <input type

Ajax上传图片文件到服务器

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUploadByJs.aspx.cs" Inherits="WebApplication1.UI.FileUploadByJs" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xht

打造你自己ajax上传图片

今天,我们需要的图片上传插件,但是,互联网不提供符合他们的需要和易于使用的.所以我写了自己. 方法1,只使用jquery代码,.代码例如以下 <p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /> <

ajax+webservice解决方案

webconfig配置 在<system.web>节点下添加 <webServices>   <protocols>    <add name="HttpSoap"/>    <add name="HttpPost"/>    <add name="HttpGet"/>    <add name="Documentation"/>   <