当前位置:首页 » 文件传输 » 上传图片js
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

上传图片js

发布时间: 2022-01-23 22:34:59

1. js 图片上传本地预览

浏览器安全性已经大大提高,要实现图片上传预览不是那么简单了
不过有很多变通或先进的方法来实现
例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法
具体可以参考这个图片上传预览效果

2. 我想实现 html +js 上传图片 并保存到本地tmp目录下,现有代码如下,求指导。必采纳

你js代码把文件以base64编码形式展示了出来,是为了让用户上传文件之前能够预览对吧。


文件的IO操作需要用后端来实现,如果你只是做web前端开发的话,就没有必要研究这个东西,如果你是后端开发者的话可以尝试一下,相关的资料很多,我写个示例吧,后端用php为例:

html实现:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>ss</title>
</head>
<body>
<formaction="file.php"method="post"enctype="multipart/form-data">
<inputtype="file"name="upfile">
<inputtype="submit"value="提交">
</form>
</body>
</html>

php实现(file.php):

<?php
@header('Content-Type:text/html;charset=utf-8');
if(!isset($_FILES['upfile'])){
exit('请选择您要上传的文件!');
}

if(!file_exists($_FILES['upfile']['tmp_name'])){
exit('您要上传的文件不存在!');
}

$file_dir=dirname(__FILE__).'/tmp';
if(!is_file($file_dir)){
@mkdir($file_dir,0777,true);
}

$file_ext='.jpg';
if(preg_match('/(.w+)$/',$_FILES['upfile']['name'],$ext_tmp)){
$file_ext=$ext_tmp[1];
}

$file_save_path=$file_dir.'/'.uniqid().mt_rand(101,999).$file_ext;

@rename($_FILES['upfile']['tmp_name'],$file_save_path);

if(!file_exists($file_save_path)){
exit('文件上传失败!');
}

exit('文件上传成功!');

3. 表单中有5个上传图片的浏览框,js怎么写必须至少上传1个图片

1个笨方法无title文档 提示:您可以先修改部分代码再运行

4. 怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br><br><img src="" id="img0" width="120">
</form>
</body>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl)
{
$("#img0").attr("src", objUrl);
$("#img0").removeClass("hide");
}
}) ;
//建立一个可存取到该file的url
function getObjectURL(file)
{
var url = null ;
if (window.createObjectURL!=undefined)
{ // basic
url = window.createObjectURL(file) ;
}
else if (window.URL!=undefined)
{
// mozilla(firefox)
url = window.URL.createObjectURL(file) ;
}
else if (window.webkitURL!=undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$('input').on('change',function(){
var value = $(this).val();
value = value.split("\\")[2];
alert(value);
})
</script>
</html>

5. 在图片中插入JS脚本上传到网站上,会被执行吗

如果服务端 没做 上传文件 的安全 处理 该文件 里的JS脚本会在用户访问该图片文件时被执行, 这是经典的图片木马技术中的一种 而已!

6. js:点击按钮上传图片,最多能上传3张,上传第4张给出提示,js怎么写

你的上传按钮是怎么操作的?是表单的submit还是单独的按钮onclick事件调用方法?

7. 用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即可。

8. jsp上传图片的js代码怎么写,帮我补充下,谢谢!

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<htmlxmlns="http://www.w3.org/1999/xhtml">
3<head>
4<metaname="DEscription"contect="mycodedemo"/>
5<metaname="Author"contect="[email protected]"/>
6<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
7<title>[email protected]</title>
8</head>
9<body>
10<imgid="tempimg"dynsrc=""src=""style="display:none"/>
11<inputtype="file"name="file"id="fileuploade"size="40"/>
12<inputtype="button"name="check"value="checkfilesize"onclick="checkfile()"/>
13
14</body>
15<scripttype="text/javascript">
16varmaxsize=2*1024*1024;//2M
17varerrMsg="上传的附件文件不能超过2M!!!";
18vartipMsg="您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过2M,建议使用IE、FireFox、Chrome浏览器。";
19varbrowserCfg={};
20varua=window.navigator.userAgent;
21if(ua.indexOf("MSIE")>=1){
22browserCfg.ie=true;
23}elseif(ua.indexOf("Firefox")>=1){
24browserCfg.firefox=true;
25}elseif(ua.indexOf("Chrome")>=1){
26browserCfg.chrome=true;
27}
28functioncheckfile(){
29try{
30varobj_file=document.getElementById("fileuploade");
31if(obj_file.value==""){
32alert("请先选择上传文件");
33return;
34}
35varfilesize=0;
36if(browserCfg.firefox||browserCfg.chrome){
37filesize=obj_file.files[0].size;
38}elseif(browserCfg.ie){
39varobj_img=document.getElementById('tempimg');
40obj_img.dynsrc=obj_file.value;
41filesize=obj_img.fileSize;
42}else{
43alert(tipMsg);
44return;
45}
46if(filesize==-1){
47alert(tipMsg);
48return;
49}elseif(filesize>maxsize){
50alert(errMsg);
51return;
52}else{
53alert("文件大小符合要求");
54return;
55}
56}catch(e){
57alert(e);
58}
59}
60</script>
61</html>