jquery操作文件域看到图像|用jquery 读取文件域中的文件并读取

Ⅰ jQuery File Upload 图片预览代码如何写

jQuery File Upload是上传文件的一个插件,不一定是图片,所以里面没做预览的支持。但是可以直接用jquery简单实现出来,代码如下:

/*先在js里扩展一个uploadPreview方法使用方法:<div><imgid="ImgPr"width="120"height="120"/></div><inputtype="file"id="up"/>把需要进行预览的IMG标签外套一个DIV然后给上传控件ID给予uploadPreview事件$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120,ImgType:["gif","jpeg","jpg","bmp","png"],Callback:function(){}});*/jQuery.fn.extend({uploadPreview:function(opts){var_self=this,_this=$(this);opts=jQuery.extend({Img:"ImgPr",Width:100,Height:100,ImgType:["gif","jpeg","jpg","bmp","png"],Callback:function(){}},opts||{});_self.getObjectURL=function(file){varurl=null;if(window.createObjectURL!=undefined){url=window.createObjectURL(file)}elseif(window.URL!=undefined){url=window.URL.createObjectURL(file)}elseif(window.webkitURL!=undefined){url=window.webkitURL.createObjectURL(file)}returnurl};_this.change(function(){if(this.value){if(!RegExp(".("+opts.ImgType.join("|")+")$","i").test(this.value.toLowerCase())){alert("选择文件错误,图片类型必须是"+opts.ImgType.join(",")+"中的一种");this.value="";returnfalse}if($.browser.msie){try{$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))}catch(e){varsrc="";varobj=$("#"+opts.Img);vardiv=obj.parent("div")[0];_self.select();if(top!=self){window.parent.document.body.focus()}else{_self.blur()}src=document.selection.createRange().text;document.selection.empty();obj.hide();obj.parent("div").css({'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)','width':opts.Width+'px','height':opts.Height+'px'});div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=src}}else{$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))}opts.Callback()}})}});

然后是HTML页面进行调用:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""<htmlxmlns="<head><title>图片上传预览演示</title><scriptsrc="jquery.min.js"type="text/javascript"></script><scriptsrc="16/uploadPreview.js"type="text/javascript"></script><script>$(function(){$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120});});</script></head><body><divstyle="width:500px;margin:0pxauto;"><h2>图片上传预览演示</h2><div><imgid="ImgPr"width="120"height="120"/></div><inputtype="file"id="up"/></div></body></html>

Ⅱ js或jquery获取文件夹里面今天的图片,该如何写

这个是不能直接获取到,你需要借助后端的语言,通过后端的语言获取文件,返还给JS,通过AJAX实现

Ⅲ 百万火急!!!jQuery怎么获取到图片的$_FILES[file][tmp_name]

要获取远程输出的$_FILES[file][temp_name],个人觉得用iframe不太好。用AJAX吧:$.post('outputFileTempName.php',null, //参数列表function(response){alert(response);}, //回调函数'text' //获取数据类型);只需在远程专的outputFileTempName.php页面输出$_FILES[file][temp_name]就可以属了。outputFileTempName.php:<?php//do Something…echo $_FILES[file][temp_name];?>

Ⅳ jquery 多图片预览

给你重新写了一个,直接拷贝到记事本另存为html就可以调试(Jquery是在线引用的)。以下代码在IE8和FF下测试通过。另:程序如果有什么问题可以HI我。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //全局变量var FileCount=0;//上传文件总数 //添加上传文件按钮 function addFile(obj) { var filePath=$(obj).prev().val(); var FireFoxFileName=""; //FireFox文件的路径需要特殊处理 if(window.navigator.userAgent.indexOf("Firefox")!=-1) { FireFoxFileName=filePath; filePath=$(obj).prev()[0].files.item(0).getAsDataURL(); } if(!checkFile(filePath,FireFoxFileName)) { $(obj).prev().val(""); return; } if(filePath.length==0) { alert("请选择上传文件"); return false; } FileCount++; //添加上传按钮 var html='<span>'; html+='<input id="f'+FileCount+'" name="'+FileCount+'" type="file"/>'; html+='<input type="button" value="添加" onclick="addFile(this)"/>'; html+='</span>'; $("#fil").append(html); //添加图片预览 html='<li>'; html+='<img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" style="cursor:pointer;" alt="暂无预览" />'; html+='<br/>'; html+='<a href="#" name="img'+(FileCount-1)+'" onclick="DelImg(this)">删除</a>'; html+='</li>'; $("#ImgList").append(html); } //删除上传文件(file以及img) function DelImg(obj) { var ID=$(obj).attr("name"); ID=ID.substr(3,ID.length-3); $("#f"+ID).parent().remove(); $(obj).parent().remove(); return false; } //检查上传文件是否重复,以及扩展名是否符合要求function checkFile(fileName,FireFoxFileName){ var flag=true; $("#ImgList").find(":img").each(function(){ if(fileName==$(this).attr("src")) {flag=false;if(FireFoxFileName!=''){ alert('上传文件中已经存在\''+FireFoxFileName+'\'!');}else{ alert('上传文件中已经存在\''+fileName+'\'!');}return; } }); //文件类型判断 var str="jpg|jpeg|bmp|gif"; var fileExtName=fileName.substring(fileName.indexOf(".")+1);//获取上传文件扩展名 if(FireFoxFileName!='')//fireFox单独处理 { fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1); } //alert(fileExtName); if(str.indexOf(fileExtName.toLowerCase())==-1) { alert("只允许上传格式为jpg,jpeg,bmp,gif的文件。");flag=false; } return flag;}</script> <style type="text/css"> .fil { width:300px; } .fieldset_img { border:1px solid blue; width:550px; height:180px; text-align:left; } .fieldset_img img { border:1px solid #ccc; padding:2px; margin-left:5px; } #ImgList li { text-align:center; list-style:none; display:block; float:left; margin-left:5px; }</style> </head> <body> <p>上传预览图片:<br><div id="fil" class="fil"> <span> <input id="f0" name="f0" type="file"/> <input type="button" value="添加" onclick="addFile(this)"/> </span></div> </p><div id="ok"><fieldset class="fieldset_img"><legend>图片展示</legend><ul id="ImgList"><!–li><img id="img1" width="100" height="100" style="cursor:pointer;"><br/><a href="#" name="img1" onclick="DelImg(this)">删除</a></li–></ul></fieldset></div> </body></html>

Ⅳ 用js、jquery如何实现上传图片的预览

$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla }); //获得表单元素HttpPostedFile oFile = context.Request.Files[0];//设置上传路径string strUploadPath = "temp/";//获取文件名称string fileName = context.Request.Files[0].FileName;补充:JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

Ⅵ jquery实现将指定文件夹的图片全部显示

ajax去访问后台脚本,如php,通过后台脚本获取指定文件夹所有图片,再返回,前台jq再显示出来

Ⅶ 用jquery 读取文件域中的文件并读取

给题主几个关键字:HTML5,FileReader,FileList,readAsTextJquery跟读取本地文本文件没有一点关系,jquery没这个功能,内能做到的只容有HTML5的fileReader(当然你要说IE的话当我没说)。使用的时候考虑下兼容性。ps.最后再吐槽下题主的问题,如果你悬赏了很高的分数,我就不说啥了。关键是一分没有,没弄清楚问题,还“回答之前先调试”,别这么高傲好吧,别人给你思路就已经足够你解决问题了。


赞 (0)