當前位置:首頁 » 文件傳輸 » 上傳圖片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>