传照片

layui 实现图片上传和预览

家住魔仙堡 提交于 2019-12-03 23:26:50
[学习笔记] 图片不自动上传并在表单提交时再上传,看代码。 附上表单页面 前台实现 <#--图片名--> <input id="fileName" type="text" lay-verify="fileName" autocomplete="off" class="layui-input" disabled> <#--隐藏输入框 用来存放上传后图片路径--> <input id="credential_hide" name="credentialOne" type="hidden" lay-verify="credentialOne" autocomplete="off" class="layui-input"> <#--隐藏按钮 上传--> <button id="upload_img" type="button" hidden></button> <button class="layui-btn" id="preview_img" type="button"> 上传图片 </button> <button class="layui-btn layui-btn-normal btn-submit" id="fake"> 确定 </button> <#----> layui.use(['form', 'layer', 'upload'], function () { $ =

微信小程序图片上传使用整理(二)

我是研究僧i 提交于 2019-12-03 18:36:54
一、小程序图片上传示例2 选择图片,先预览,点击提交时上传 1.wxml <button type='primary' plain='true' bindtap='getImg'> 选择图片 </button> <image src='{{imgpath}}'></image> <button type='warn' plain='true' bindtap='uploadImg'> 确定上传 </button> 2.js 处理 /** * 页面的初始数据 */ data: { imgpath: '', }, getImg: function () { var _this = this; //选择图片 wx.chooseImage({ success: function (res) { //预览显示 _this.setData({ imgpath: res.tempFilePaths[0] }); }, }) }, uploadImg: function () { var _this = this; console.info(_this.data); //上传处理 wx.uploadFile({ url: 'http://localhost:63588/ashx/upload_form.ashx', //上传地址 filePath: _this.data.imgpath,/

fileupload上传图片

天大地大妈咪最大 提交于 2019-12-03 16:55:49
<asp:FileUpload ID="FileUpload1" runat="server" accept="image/*" />    HttpFileCollection upFiles = Request.Files; if (upFiles.Count > 0 && upFiles.Count < 2) { string wenjianjia = "a_" + DateTime.Now.ToString("yyyy-MM-dd"); string savePath = "/plugins/dangxingtijian/PC/face/img/" + wenjianjia; string savePaths = MapPath(savePath); if (!Directory.Exists(savePaths)) { Directory.CreateDirectory(savePaths); } for (int i = 0; i < upFiles.Count; i++) { string url_a = "a" + DateTime.Now.Ticks.ToString() + i; string url_f = "f" + DateTime.Now.Ticks.ToString() + i; string extendName = string.Empty;

微信JS-SDK接口上传图片以及wx.config的配置

∥☆過路亽.° 提交于 2019-12-03 16:54:56
最近做的微信网页要实现一个上传图片的功能,倒腾了半天终于搞好了,具体的步骤可以查看微信官方文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html ,这里只是简答说一下, JSSDK使用步骤 步骤一:绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注:登录后可在“开发者中心”查看对应的接口权限。 步骤二:引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js 如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js 第三步:请求后台接口,注入配置信息 wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: ''

上传图片,点击触发隐藏得file

孤街浪徒 提交于 2019-12-03 16:51:42
编辑一个div 将其宽高设定好 给其背景颜色 div class="form-group"> <label class="col-sm-2 control-label">上传图片</label> <div class="col-sm-10"> <div id="upimg" style="width: 300px; height: 200px; background-color: aquamarine; text-align: center; line-height: 200px;" onclick="UpLode()"> <span><i class="glyphicon glyphicon-open"></i>上传图片</span> </div> </div> </div> 设一个隐藏得file <input id="FImg" onchange="GetFile()" type="file" style="display: none" />   这个隐藏得file可以写到body最下面 然后写js 点击直接触发file function UpLode() { //触发Fil的 点击事件 $("#FListImg").trigger("click"); } 再写个Js 让其上传后显示到上传框内 function GetFile() { //2 取上传后图片的值 //event

ebay上传图片的要求

爷,独闯天下 提交于 2019-12-03 16:50:55
eBay's Picture Requirements Introduction to Pictures in Listings Pictures make an item more appealing, and give buyers a better idea of the item's appearance. A picture that is stored on the eBay site is stored under eBay Picture Services (EPS) . A self-hosted picture is stored on a different site. At least one picture is required for each listing. Using lots of high-quality pictures is a great way to help sell your item. Up to 12 pictures can be added to any listing in any category at no cost. For motor vehicle listings, you can have 12 free pictures and for a small fee up to 24 pictures. If

Ajax上传图片

假如想象 提交于 2019-12-03 16:48:54
上传图片input的类型是file (如下图) <input type='file' name='xxx' id='pic_img'> 当我们选择图片文件时如下: 判断是否为空如下: if($('#pic_img').val() == ''){ //为空 }else{ //不为空 } 上传到后台之前要先加一个form把它包起来,并添加点击按钮上传 如下: <form enctype="multipart/form-data" id="uploadForm"> <input type='file' name='xxx' id='pic_img'> <input type='button' onclick='upload()' value='点击上传'> </form> 然后是js部分 通过ajax上传 function upload(){ var formData = new FormData($("#uploadForm")[0]) //创建一个forData formData.append('img', $('#pic_img')[0].files[0]) //把file添加进去 name命名为img $.ajax({ url: /api/v1/xxxx, data: formData, type: "POST", async: false, cache: false,

ashx 图片上传

若如初见. 提交于 2019-12-03 16:48:24
ashx 图片上传 为了方便多出调用图片上传方法 首先我们将图片上传方法抽离出来 创建ashx 一个新的方法 using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.IO; using System.Linq; using System.Web; namespace FileImg { /// <summary> /// ImgUpLoad 的摘要说明 /// </summary> public class ImgUpLoad : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write("Hello World"); } public bool IsReusable { get { return false; } } /// <summary> /// 图片上传 并保存至服务器 返回 保存图片的相对路径URL /// </summary> /// <param name="context"></param>

移动端图片上传旋转、压缩的解决方案

喜夏-厌秋 提交于 2019-12-03 14:20:09
前言 在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片旋转了90度d的问题,包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题,横拍出来的照片就正常显示。因此,可以通过获取手机拍照角度来对照片进行旋转,从而解决这个问题。 Orientation 这个参数并不是所有图片都有的,不过手机拍出来的图片是带有这个参数的。 旋转角度 参数值 0° 1 顺时针90° 6 逆时针90° 8 180° 3 参数为 1 的时候显示正常,那么在这些横拍显示正常,即 Orientation = 1 的手机上,竖拍的参数为 6。 想要获取 Orientation 参数,可以通过 exif.js 库来操作。exif.js 功能很多,体积也很大,未压缩之前足足有 30k,这对手机页面加载来说是非常大影响的。而我只需要获取 Orientation 信息而已,所以我这里删减了 exif.js 库的一些代码,将代码缩小到几KB。 exif.js 获取 Orientation : EXIF.getData(file, function() { var Orientation = EXIF.getTag(this, 'Orientation'); }); file 则是 input 文件表单上传的文件。上传的文件经过 fileReader.readAsDataURL(file)

原生JS上传图片、保存图片(ajax,form两种提交)

℡╲_俬逩灬. 提交于 2019-12-03 13:30:18
1. 技术栈前端/后端 原生JS 2.代码部分   2.1 前端     2.1.1 Form表单提交方式  文件名: upload.form.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>upload by form</title> </head> <body> <form action="/upload" enctype="multipart/form-data" method="post"> <input type="file" name="avatar" id="avatar" multiple="multiple" /> <input type="submit" value="form上传头像" id="submit" /> </form> <img id="img" /> </body> <script> window.onload = () => { const avatar = document