本文实例讲述了JS实现不需要上传的图片预览插件与用法。分享给大家供大家参考，具体如下：小小的几十行代码，很牛逼，很实用。支持多个图片的预览，只要new多个对象就行了。html如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>uploadPreview演示</title><script src="uploadPreview....
在XMLHttpRequest Level2出台之前，大多数的异步上传图片都是利用iframe去实现的。 至于具体的实现细节，我就不在这边??碌模?oogle一下就有文章谈这个东西。 这次主要说说，怎么用新的API去实现图片上传。 首先，少不了的自然是XMLHttpRequest Level2的一些新特性啦。 其中最为实在的就是FormData对象，直接把表单(form)的Dom对象转为FormData对象，然后向服务器发送。 还有就是Progress事件的支持，异步上传终于可以查看进度条啦...
JS压缩上传图片/*** @Date: 2016/11/17 0017* @Time: 10:14* @Author: lxbin** Created with JetBrains WebStorm.*//*** http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/* http://jafeney.com/2016/08/11/20160811-image-upload/*//*** 读取文件* @param file 文件对象* @return {Promise}*/ function readFileAsync(file) {return new Promise((resolve, reject) => {const reader = new FileReader()reader.o...
Document $(function(){ $(".file").change(function(){ var fileImg = $(".fileImg"); var explorer = navigator.userAgent; var imgSrc = $(this)[0].value; if (explorer.indexOf(MSIE) >= 0) { if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) { imgSrc = ""; fileImg.attr("src","/img/default.png"); return false; }else{ fileImg.attr("src",imgSrc); } }else{ if (!/\.(jpg|jpeg|png|JPG|PNG|JP...
1.添加、删除HTML结点 2.上传图片预览 添加、删除HTML结点 & 上传图片预览 删除 删除 增加附件 图片预览： [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
以前不知道 file 控件也能使用 onchange,导致面试时失去良机。 function yulan() { var fileext=document.form1.UpFile.value.substring(document.form1.UpFile.value.lastIndexOf("."),document.form1.UpFile.value.length) fileext=fileext.toLowerCase() if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.png')&&(fileext!='.bmp')) { alert("对不起，系统仅支...
以前不知道 file 控件也能使用 onchange,导致面试时失去良机。 function yulan() { var fileext=document.form1.UpFile.value.substring(document.form1.UpFile.value.lastIndexOf("."),document.form1.UpFile.value.length) fileext=fileext.toLowerCase() if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.png')&&(fileext!='.bmp')) { alert("对不起，系统仅支...
javascript 图片预览 function preview(imgFile,num) { //预览代码，支持 IE6、IE7。 var newPreview = document.getElementById("preview1"); var t ; if(document.all) //IE t = imgFile.value; else t = imgFile.files[0].getAsDataURL(); //FF newPreview.style.backgroundImage = "url(" + t + ")";//imgFile.value; newPreview.style.width = "108px"; newPreview.style.height = "130px"; newPreview.style.dis...
在我 上一篇帖子 （译文 ） 中，谈到了各个浏览器究竟会在什么情况下弹出脚本失控提示，对于Internet Explorer 来说，当浏览器执行了数量过多的语句时就会停止执行脚本，而其他的浏览器，则是持续执行脚本超过一定时间的时候就会给出提示。而我们要探讨的核心问题，不是这些浏览器如果探测失控的脚本，而是我们如何才可以让脚本运行的更快一些，从而避免这些警告 。 脚本失控基本上有以下四个方面的原因： 在循环中执行了太多的操作...
前台: upload.htm 代码如下: upload var TfileUploadNum = 1; //记录图片选择框个数 var Tnum = 1; //ajax上传图片时索引 //增加上传按钮 function TAddFileUpload() { var idnum = TfileUploadNum + 1; var str = ""; str += "图片" + idnum + ":"; str += ""; str += ""; str += ""; $("#loadimage").append(str); TfileUploadNum += 1; } //开始上传 function TSubmitUploadImageFile() { document.getElementById(...
代码如下:$im = imagecreatefromjpeg($_file["upload"]["tmp_name"]); //你要打水例子的图片 $watermark = imagecreatefrompng("Smiley.png"); //水印图的路径 $im_x = imagesx($im); $im_y = imagesy($im); $w_x = imagesx($watermark); $w_y = imagesy($watermark); imagecopy($im,$watermark ,$im_x-$w_x,$im_y-$w_y,0,0,$w_x,$w_y); imagejpeg($im); //可加上路径以保存有水印的图 //可以利用type判断下图片类型 //switch($_fi...
我们或多或少都使用过各式各样的富文本编辑器，其中有一个很方便功能，复制一张图片然后粘贴进文本框，这张图片就被上传了，那么这个方便的功能是如何实现的呢？ 原理分析 提取操作：复制=>粘贴=>上传 在这个操作过程中，我们需要做的就是：监听粘贴事件=>获取剪贴板里的内容=>发请求上传 为方便理解下文，需要先明白几点： 我们只能上传网页图(在网页上右键图片，然后复制)和截图(截图工具截的图片，eg：qq截图)，不能粘贴上传系统...
代码如下: #newPreview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=images); } function PreviewImg(imgFile) { var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; newPreview.style.width = newPreview.offsetWidth /2; newPreview.style.height = newPreview.off...
先看看效果图吧： 机会难得，有点技术亮点，就一下子投入到功能开发中去了。在这一块的功能开发中，自己还是学到些不错的东西，其中一点就是，用户选择上传的图片，如何预览出来呢。网上找了些资料，最终采用如下方法： 代码如下: function (obj) { //logo上传添加事件 var logoimg = null; if (document.all) {//如果是IE情况下 obj.select(); logoimg = document.selection.createRange().text; //由于是采用滤镜的方式，所以要...
最近也经常遇到浏览器兼容的问题，昨天遇到上传图片预览问题，发现IE8和火狐不能显示，弄了很久，早上终于解决了很高兴。故跟大家分享下，我也多是网上找的，自己总结的一下，希望对大家有点帮助。 我们一般根据IE6、IE7进行开发的时候写图片预览的代码是： 代码如下: document.getElementById("img").src = document.getElementById("file").value; 还有一种方式 代码如下: document.getElementById("div1").filters...