导航:首页 > 图片大全 > 图片上传前如何做自检

图片上传前如何做自检

发布时间:2022-05-31 00:55:25

怎么实现图片上传前预览功能呢

预览图片
预览功能的基本设计思路:创建一个img元素,再把文件域的value值赋值给img元素的src属性。

<form name="form4" id="form4" method="post" action="#">

<input type="file" name="file4" id="file4" ōnchange="preview4()" />

<img id="pic4" src="" alt="图片在此显示" width="120"/>
</form>

<scrīpt type="text/javascrīpt">

function preview4(){

var x = document.getElementById("file4");

var y = document.getElementById("pic4");

if(!x || !x.value || !y)

return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

y.src = "file://localhost/" + x.value;

}

else{ alert("您选择的似乎不是图像文件。"); }

}

</scrīpt>

试下效果:


如果你用的是Firefox(或Opera),可能会发现什么也没有发生。是的,很不幸Firefox的安全策略不允许我们显示一个用户的本地图像文件。不知道他们为什么要这么做,我个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文件,要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员,他并不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件,Firefox对安全性的要求让他们有些过于敏感了。

让Firefox显示本地文件的唯一办法就是修改它的默认安全策略:

在Firefox的地址栏中输入“about:config”
继续输入“security.checkloari”
双击下面列出来的一行文字,把它的值由true改为false
然后你可以再试试上面预览,everything works well!可惜的是我们并不能要求所有的用户都去修改这个值(更不用说修改的过程还挺麻烦),所以这对我们来说毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。

用DOM来创建对象
在上面的XHTML代码中,我们为了预览图片,事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外,如果用户浏览器不支持Javascrīpt,他不仅无法使用这个功能,还要接受页面上一个永远不会显示出来的破图。要解决这个问题,我们就需要在“运行时”再生成这个img对象,途径还是DOM。

<form name="form5" id="form5" method="post" action="#">

<input type="file" name="file5" id="file5" ōnchange="preview5()"/>

</form>

<scrīpt type="text/javascrīpt">

function preview5(){

var x = document.getElementById("file5");

if(!x || !x.value)

return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

var y = document.getElementById("img5");

if(y){ y.src = 'file://localhost/' + x.value; }

else{

var img=document.createElement('img');

img.setAttribute('src','file://localhost/'+x.value);

img.setAttribute('width','120');

img.setAttribute('height','90');

img.setAttribute('id','img5');

document.getElementById('form5').appendChild(img);

}

}

else{ alert("您选择的似乎不是图像文件。"); }

}

</scrīpt>

② 怎么做拍图片上传

数据线 就是你买手机时候给的 有USB插口的 跟电脑连接上就会在我的电脑里出现一个新的盘 那就是你手机的盘 如果你手机有内存卡 也可以用读卡器 来把照片传电脑里 很简单

③ input上传图片,如何使选择图片就开始自动执行上传操作

不能在input中单独加你所谓的小表单;
如果input type='file' 在一个表单中的其中一个元素或节点可以用onblur方法做离焦提交;当然你可以用一些js的插件做图片上传;

④ .NET 中如何实现图片上传前的预览

<script>
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("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
document.form1.UpFile.focus();
}
else
{
//alert(''+document.form1.UpFile.value)//把这里改成预览图片的语句
document.getElementById("preview").innerHTML="<img
src='"+document.form1.UpFile.value+"' width=120 style='border:6px double
#ccc'>"
}

}
</script>

<form id="form1" runat="server" method="POST" enctype="multipart/form-data">
<div>
<input type="file" name="UpFile" size="46" onchange="yulan()">

<div id="preview"></div>

</div>
</form>

⑤ 网页如何实现图片批量上传,上传前进行加缩

Chrome浏览器用小乐图客,可以批量上传图片。
至于上传前压缩,如果是指减小图片尺寸,可以使用小乐图客的美图功能(缩放)
如果是指减小体积(size),那就可以使用小乐图客存图功能(需先下调jpeg品质,建议设置为95,图片质量损失不大)

⑥ php图片上传前预览怎么实现!!

1.先创建一个file表单域,我们需要用它来浏览本地文件。
<form name="form1" id="form1" method="post" action="upload.php">
<input type="file" name="file1" id="file1" />
</form>
2.试下效果:
判断文件类型:
当用户选择了一个图片文件时,希望他能马上看到这张图片的缩略图,以便他能确认没有把自己的光屁股照片当作头像传到服务器上^_^。
在预览之前还得先判断一下用户选择的是不是一个图像文件,如果他想用一个.rar文件做头像的话我们也需要礼貌地提醒一下。
<form name="form2" id="form2" method="post" action="upload.php">
<input type="file" name="file2" id="file2"
onchange="preview()" />
</form>
Javascript函数实现,注意使用DOM方法getElementById来访问对象。不要再使用form
和input的name属性来访问对象了,只有IE才这么干。<script type="text/javascript">
function preview2(){
var x = document.getElementById("file2");
if(!x || !x.value) return;
if(x.value.indexOf(".jpg")<0
&& x.value.indexOf(".jpeg")<0
&& x.value.indexOf(".gif")<0){
alert("您选择的似乎不是图像文件。");
}else{
alert("通过");
}
}
</script>
3.试下效果:

这里有一个问题,如果用户选择了名为“fake.jpg.txt”的文件,这段脚本仍旧会认为这是一个合法的图像文件。一个可行的解决方案是先 把文件名转换成小写,再取文件路径的最后4到5位,判断一下文件的扩展名是否确为支持的图像文件扩展名。不过这种方案略显笨拙,也没有什么美感可言, 我们换一种方案:用“正则表达式”来判断文件扩展名。
<script type="text/javascript">
function preview3(){
var x = document.getElementById("file3");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
alert("通过");
}else{
alert("您选择的似乎不是图像文件。");
}
}
</script>
4.看看效果(可以自己创建一个“fake.jpg.txt”文件试试):

回到这段脚本上来,即使你还看不懂正则表达式那两行,但整段脚本的美感还是很明显的:简洁、直接、语义流畅,这与Web标准关于XHTML的要求是一致的,与Web设计师或开发者天生的“完美”主义也是一致的。
jjww一大段之后,转入重点——预览图片
预览功能的基本设计思路是很清晰的:创建一个img元素,再把文件域的value值赋值给img
元素的src属性。<form name="form4" id="form4" method="post" action="#">
<input type="file" name="file4" id="file4"
onchange="preview4()" />
<img id="pic4" src="http://blog.163.com/lgh_2002/blog/" alt="图片在此显示" width="120"/>
</form>
<script type="text/javascript">
function preview4(){
var x = document.getElementById("file4");
var y = document.getElementById("pic4");
if(!x || !x.value || !y) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
y.src = "file://localhost/" + x.value;
}else{
alert("您选择的似乎不是图像文件。");
}
}
</script>
5.试下效果:

如果用的是Firefox(或Opera),可能会发现什么也没有发生。是的,很不幸Firefox的安全策略不允许显示一个用户的本地 图像文件。不知道为什么要这么做,个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文 件,要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员,并 不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件,Firefox对安全性的要求让他们有些过于敏感了。
让Firefox显示本地文件的唯一办法就是修改它的默认安全策略:
在Firefox的地址栏中输入“about:config”
继续输入“security.checkloari”
双击下面列出来的一行文字,把它的值由true改为false
然后你可以再试试上面预览,everything works well!可惜的是并不能要求所有的用户都去修改这个值(更不用说修改的过程还挺麻烦),所以毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。
用DOM来创建对象
在上面的XHTML代码中,为了预览图片,事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外,如果用户浏览器不支持 Javascript,不仅无法使用这个功能,还要接受页面上一个永远不会显示出来的破图。要解决这个问题,就需要在“运行时”再生成这个img对 象,途径还是DOM。
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5"
onchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){
y.src = 'file://localhost/' + x.value;
}else{
var img=document.createElement('img');
img.setAttribute('src','file://localhost/'+x.value);
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
document.getElementById('form5').appendChild(img);
}
}else{
alert("您选择的似乎不是图像文件。");
}
}
</script>
6.试下效果:

这样就相对比较完美了。DOM和正则表达式一样,都是“包你不悔”的实 用技术,如果你希望更多了解、深入学习、或者顺利实践Web标准,DOM是不可或缺的。从本人最近的体会来说,Javascript+DOM+CSS蕴 藏着强大的能量,就看怎么释放它了。

7.最后帖上JQUERY的上传预览代码:

de><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/jquery.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="http://blog.163.com/lgh_2002/blog/' + this.src + '" />').show();
}).mouseout( function(){
ei.hide("slow");
})
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>de>

⑦ 在做图片上传功能时,如何显示客户端图片

不管现实哪里的图片 都是使用的链接地址!!!客户端也有地址阿 比如 java工作空间下 在哪里可以找到哪个图片 你就设置哪里的地址 就好了

那也容易阿
<input id="file" type="file" /> 写一个 onchange事件 改变值的时候就调用 在js 获取里面的值
值就是你选择的路径 然后再在js里面 将你得到的路径 赋值给 img的src属性 就可以了
<img src=“” id="img" />

⑧ php 如何实现图片上传前预览,并且有多个图片上传和预览

<form name="form4" id="form4" method="post" action="#"> <input type="file" name="file4" id="file4" ōnchange="preview4()" /> <img id="pic4" src="" alt="图片在此显示" width="120"/> </form> <scrīpt type="text/javascrīpt"> function preview4(){ var x = document.getElementById("file4"); var y = document.getElementById("pic4"); if(!x || !x.value || !y) return; var patn = /\.jpg$|\.jpeg$|\.gif$/i; if(patn.test(x.value)){ y.src = "file://localhost/" + x.value; } else{ alert("您选择的似乎不是图像文件。"); } } </scrīpt>

⑨ 图片上传系统,怎么做

用com.jspsmart.upload.SmartUpload(加入classpath)包。非常方便。

//upload.htm
<form action="upload.jsp" method=post>
<input type=file>
<input type=submit>
</form>

//upload.jsp
<jsp:useBean id="mySmartUpload" scope="page" class="com.jspsmart.upload.SmartUpload" />
<%
mySmartUpload.initialize(pageContext);
mySmartUpload.upload();
mySmartUpload.save("/");
%>
文件就上传到了tomcat的root目录下(假设你没改动服务器配制)。

阅读全文

与图片上传前如何做自检相关的资料

热点内容
乳环男生图片 浏览:417
qq将图片转为文字 浏览:394
文档怎么提取图片 浏览:23
个性文字图片大全带图 浏览:717
word旋转图片大全 浏览:649
头发长的女孩图片大全 浏览:182
简单的边夹图片大全 浏览:114
学生烫头发型图片男 浏览:777
美国超人动漫图片 浏览:667
东北冬季女生的图片 浏览:34
发型前面是圆的图片 浏览:565
美女穿白丝被绑图片 浏览:668
自行三轮车价格及图片 浏览:131
尖头发型图片男 浏览:818
word文档怎么把图片生成二维码 浏览:34
鱼图片动漫图片大全大图 浏览:52
大哈雷摩托车价格图片 浏览:10
手机钉钉图片如何截图 浏览:451
如何根据图片确定分子式 浏览:481
元旦简单的画图片 浏览:124