移动端头像上传

头像上传HTML代码:

<form  action="/index.php?m=&c=User&a=uploadImage" method="post" id="formid" enctype= "multipart/form-data" style="display: block;">
        <input id="upfiles" class="upfiles" type="file" name="log" onchange="uploadOperate();">
        <a class="pic-img">
            <img class="showimg" width="100px" onclick="" src="">
        </a>
        <input type="submit" value="提交" class="btn2">
</form>

上传之后显示当前头像:

   $("#upfiles").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        if (objUrl) {
            $(".showimg").attr("src", objUrl);
        }
    })

    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

  

时间: 2024-08-07 11:20:09

移动端头像上传的相关文章

vue移动端头像上传,不大于50K

先看效果: 稍加说明一下:第一张图是user.vue,第二张图是点击头像出现的系统自带上传文件格式(安卓和IOS不一样),第三张图是cropper组件(我单独设置的),第四张图是上传完成的user.vue. 其实插件不难,只不过为了契合项目和移动端,做了些修改. 官方介绍:https://www.npmjs.com/package/cropperjs 第一步:安装插件 cnpm install cropperjs --save 第二步:分离设置成插件cropper.vue <template>

移动端头像上传AJax input file

jQuery中的Ajax不能支持 input file 需要用ajaxupload.js但是先需要引入jQuery文件 <script src="__PUBLIC__/js/ajaxfileupload.js"></script> HTML代码很简单: input id="upfiles" class="upfiles" type="file" name="log" onchange

移动端 上传头像 并裁剪功能(h5)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <title>移动端头像图片上传裁剪</title>

jq upload图片上传代码

/* * 图片上传 * */ function postImgData() { $("#addFileInfo input[name='file']").change(function () { console.log($(this).val()) if (!$(this).val()) { return } var fileTyle = $(this).val().split("."); console.log(fileTyle); if (fileTyle[1]

Uploadify/uploadifive上传(中文文档)

Uploadify是一款基于JQuery的优秀的文件/图片上传的插件,有基于Flash和HTML5两种版本. Uploadify/uploadifive主要特点有: 1. 多文件上传 2. 个性化设置 3. 上传进度条显示 4. 拖拽上传(HTML5版本) 官网:http://www.uploadify.com 部署 在部署一个Uploadify实例前,请确保满足最低要求: 1.jQuery 1.4.x 或更高版本 2.Flash Player 9.0.24 或更高版本 3.支持PHP, ASP

GitHub限制上传大于100M的单个大文件

工作中遇到这个问题,一些美术资源..unitypackage文件大于100M,Push到GitHub时被拒绝.意思是Push到GitHub的每个文件的大小都要求小于100M. 搜了一下,很多解决办法只是把这些超过100M的大文件从本地版本库中移除,使得Push可以成功.但这并没有解决如何上传大文件到GitHub的问题. 解决办法是使用Git LFS. 用法参考:http://blog.csdn.net/tyro_java/article/details/53440666 按照以上方法设置好后,就

如何上传代码到github?

如何上传代码到github? 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: https://git-for-windows.github.io/ 1.进入Github首页,点击New repository新建一个项目  2.填写相应信息后点击create即可 Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public,

万家报账平台没有“上传文件”按钮的解决办法

在有的电脑没有"上传文件"的按钮? 第一步:首先检查浏览器设置. 第二步:找到IE的Internet选项菜单,开启菜单栏的根据下列方面找,如下图: 第三步:找到Internet选项后,点击,选择安全选项卡,并点击"自定义级别" 第四步:找到"将文件上载到服务器时包含本地目录路径"选择"启用".然后点击确定关闭IE,重启打开. 第五步:更新浏览器的flash版本.在百度中搜索"flash player官网"即

通过jQuery Ajax使用FormData对象上传文件

转自:http://www.cnblogs.com/labnizejuly/p/5588444.html FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file"