文件上传功能现在是越来越普遍，所有的社交网站，媒体网站，比如优酷视频，微博等，都提供了上传图片，上传视频等功能。但过去WEB程序员都很清楚，用HTML表单上传文件是很麻烦的事情，特别是你想了解一下用户上传的文件的一些属性，必须等它上传完成后才能知道。 未知的东西上传到服务器上，有可能产生安全问题，也有可能体积太大，超过允许，浪费空间。现在好了，WEB技术在进步，HTML5带来了很多好东西。这个FileReader API就能让...
对于Web程序员来说，在网页上处理文件上传，总是一件很麻烦的事情。在过去，我们不能够通过拖拽上传图片，也没有复杂Ajax上传技术，很少处理多文件批量上传。我们也无法获取上传过程中的信息，除非上传完成后从服务器端获得。有时候，等你上传完毕后才发现上传的文件不合适！ 如今，HTML5的革命，现代浏览器的诞生，JavaScript的升级，这些给我们提供了使用Javascript和input[type=file]元素获取上传文件过程信息的能力。 下面就来...
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路，考虑到该功能有一定的适用性，于是把相关的逻辑封装成了一个ImageUploadView组件，实际使用效果可查看下一段的git效果图。在实现这个组件的过程中，有用到前面几篇博客介绍的相关内容，比如继承库class.js，任意组件的事件管理库eventBase.js，同时包含进了自己对职责分离，表现与行为分离这两方面的一些思考，欢迎阅读与交流。 演示效果：注：由于演示的代...
简单记录下今早做H5上传中一些代码还有坑 一、展示 因为前端上传文件是必须通过form表单的，不能使用ajax，这样的话一个移动页面放入一个type为file的input真心不怎么好看，如下图，很挫有没有解决办法找了下，PC上有些是把这个input换成flash，采用jquery的工具库比如uploadify来做，但是移动端大部分浏览器是不支持flash的。所以最后采用的办法还是用form表单的形式，只是把这个form和input的透明度设置为0，让它们和准备显示的内...
本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子，供大家参考，具体内容如下HTML5 Ajax Uploader/*原生JS版*/ document.getElementById("upJS").onclick = function() {/* FormData 是表单数据类 */var fd = new FormData();var ajax = new XMLHttpRequest();fd.append("upload", 1);/* 把文件添加到表单里 */fd.append("upfile", document.getElementById("upfile").files[0]);ajax.open("post", "test.php", true);aja...
代码如下: var obj=网页中的 obj.outerHTML = obj.outerHTML.replace(/(value=\").+\"/i, "$1\"");
代码如下: #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...
1.初始化上传控件数量。 代码如下: $(document).ready(function() { $(#H_File).uploadFile({ key: test,count:3 }); }); 以前的设计思想是，初始化上传控件数量，页面显示为1个上传控件，每当上传成功后，在下面创建一个上传控件。 2.上传图片成功后 这就是最终的效果，如果您有更好的插件，希望一起开源。 其他的就不多说了，如果您感兴趣，点击下载源码 /201010/yuanma/jquery_aspnet_upload1.rar (262.34 kb)
这样TinyMCE 就可以正常显示图片了。其实该功能属于普通HTML富文本控件基本功能了。现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片。 实现思路： 使用Ajax 进行图片上传，此上传方式可以更友好的实现TinyMCE 的图片上传扩展， 具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片。将Ajax上传图片集成到 TinyMCE 中， 主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 advimage 插件。 了...
先看看效果图吧： 机会难得，有点技术亮点，就一下子投入到功能开发中去了。在这一块的功能开发中，自己还是学到些不错的东西，其中一点就是，用户选择上传的图片，如何预览出来呢。网上找了些资料，最终采用如下方法： 代码如下: 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...
代码如下: 测试文件上传 $(function(){ //ShowFolderFileList("D:\\CodeNet\\web\\Images\\shopTemplets"); }); function ShowFolderFileList(FilePath){ var fso, f, fc, sf; fso = new ActiveXObject("Scripting.FileSystemObject"); try{ f = fso.GetFolder(FilePath); }catch(err){ alert("文件路径错误或者不存在!!"); return false; } // 列出所有文件 fc = new Enumerator(f.files); var fileName = ""; for(;!fc.atEn...
代码如下: function checkPhoto(fnUpload) { var filename = fnUpload.value; alert(filename); var mime = filename.toLowerCase().substr(filename.lastIndexOf(".")); if(mime!=".jpg") { alert("请选择jpg格式的照片上传"); fnUpload.outerHTML=fnUpload.outerHTML; } }
代码如下: Easy.Ajax = { proxyPool: { length: function () { var i = 0; for (var p in this) i++; return i - 1; } }, index: 0, async: true, xmlData: false, timeout: 1, defaultHeader: application/json; charset=utf-8, clearCache: true, emptyFn: function () { }, defaultHandlers: { empty: function () { }, onerror: this.empty, onload: this.empty, ontimeout: this.empty, onprogress: this.empty }, createXhr:...
jquery实现上传图片及图片大小验证、图片预览效果代码 上传图片验证 代码如下: */ function submit_upload_picture(){ var file = $(file_c).value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $(both_form).action="file!upload.action"; $(both_form).submit(); $(insert_img).sethtml(); $(display_div).setstyle(display, block); $(upload_div).setstyl...