js選擇圖片上傳

發布時間: 2023-03-12 07:35:03

Ⅰ js/jquery上傳圖片的問題

你可以使用jquery的一個插件uploadify，官網下載http://www.uploadify.com/
使用示例http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html

Ⅱ 用js腳本,怎麼實現彈出選擇圖片的對話框，並將文件上傳到伺服器

彈出框用框架（layer.js，具體使用可參考官方文檔）。

HTML如下：

!!! 注意這種提交會刷新頁面

<formname="upload-file"method="post"enctype="multipart/form-data">
<labelfor="upload-file">上傳</label>
<inputid="upload-file"type="file"name="images"hidden="hidden">
<inputtype="submit"value="提交">
</form>

提交過後後端就可以獲取到圖片(PHP獲取代碼如下：$_POST['images'];)

Ⅲ 怎樣用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>

Ⅳ JS上傳圖片怎麼限制只能選擇一張圖片上傳

正常的<input type="file" />就是選擇單個文件的
而在html5中新增的mutiple屬性才可以多選<input type="file" multiple="multiple"
/>

Ⅳ 如何使用js實現IE9下上傳圖片並預覽

<div >
<div id="headImgPicview">
<img src="" id="headImgPic" width="200" height="auto"/>
</div>
<input type="text" id="headImgShow" name="headImg"
placeholder="圖片(.jpg .jpeg .png)" size="40"
pattern="(.jpg$)|(.jpeg$)|(.png)|(.JPG$)|(.JPEG$)|(.PNG$)"
data-foolish-msg="請選擇圖片！"
value=""
required readonly/>
<div class="am-form-group am-form-file" style="width: 175px">
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i> 選擇要上傳的圖片</button>
<input type="file" id="headImg" onchange="imgcheck('headImg',this)" multiple>
</div>
</div>
//文件動態上傳方法+格式判斷
function imgcheck(imgid,file){
if(!(/.jpg$/.exec($('#'+imgid).val())||(/.png/.exec($('#'+imgid).val()))||(/.jpeg$/.exec($('#'+imgid).val()))
||(/.JPG$/.exec($('#'+imgid).val()))||(/.PNG$/.exec($('#'+imgid).val()))||(/.JPEG$/.exec($('#'+imgid).val())) )){
alert("圖片格式不正確！應為：.jpg .jpeg .png");
$('#'+imgid).val('');
}else{
var imgURL = document.getElementById(imgid);
$('#'+imgid+'Show').attr('placeholder',imgURL.value);

//調用圖片預覽
previewImage(imgid+'Pic',file);

Ⅵ 如何在前端用js進行多圖片上傳

產品提了一個需求，要求在一個html中實現多行多圖片上傳，原型圖如下:

2.1 ：html

html頁面由前端實現，此處增加<ul><li></li></ul>是為了配合圖片單擊放大圖片功能的實現

        <ul id="ul_other">

              <li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>

        </ul>

2.2 ：js

      var imgSrc_other=[];

        var imgFile_other=[];

      function add_file_image(id) {

          var fileList =document.getElementById("file_"+id).files;// js 獲取文件對象

        if (verificationFile(fileList[0])){

          for(var i =0;i

          var imgSrcI =getObjectURL(fileList[i]);

                        if (id=="other"){

              imgSrc_other.push(imgSrcI);

                            if(fileList[i].size/1024 >100) { //大於100kb，進行壓縮上傳

     fileResizetoFile(fileList[i],0.6,function(res){

imgFile_other.push(res);

                                })

            }else{

            imgFile_other.push(res);

                        }

                    }

          addNewContent(id);

                }

        }

    //新增圖片

    function addNewContent(obj) {

    //刪除原先

      $("#ul_"+obj).html("");

        //判斷循環新增

    var text="";

        if (obj=="other"){

     for(var a =0;a < imgSrc_examReportCard.length;a++) {

text +='<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>';

           }

      }else{

    console.log('臟數據');

        }

    var oldBox ="<li><div class=\"filediv\"><span>+</span>\n" +

        "<input type=\"file\" id=\"file_"+obj+"\" class=\"file_input\" onchange=\"add_file_image('"+obj+"')\">\n" +

        "</div></li>";

        $("#ul_"+obj).html( text+localText);

    }

使用formData上傳

    var form =document.getElementById("form_addArchive");//表單id

  var formData =new FormData(form);

    $.each(imgFile_other,function(i, file){

    formData.append('imgFileOther', file);

    });

$.ajax({

url:url,

    type:'POST',

    async:true,

    cache:false,

    contentType:false,

    processData:false,

    dataType:'json',

    data:formData,

    xhrFields:{

withCredentials:true

},

    success:function(data) {

}

},

error:function(XMLHttpRequest, textStatus, errorThrown) {

    }

})

後台使用@RequestParam(value ="imgFileOther", required=false) List<MultipartFile> imgFileOther, 接受

//獲取圖片url以便顯示

//文件格式驗證

//圖片壓縮

Ⅶ js上傳圖片並且預覽功能

Ⅷ js input file文件上傳圖片並展示

  1 頁面HTML內容

    2 獲取input[file]元素

    3 對獲取的file元素操作，也就是操作fileReader屬性

1：Blob

2: File

3: FileList

4: FileReader

FileList ：

這里，默認狀態下選擇文件每次files屬性上FileList對象里只有一個file文件。

file對象中包含了name 文件名; size ; type 文件類型; lastModified 最後修改時間；

FileReader：非同步讀取本地文件內容；包括File 和Blob ；

創建FileReader對象;讀取file文件

關於fileReader的幾個屬性：

FileReader.error 只讀一個 DOMException 代表在讀取文件中出現的錯誤。 FileReader.readyState 只讀一個數字表明的狀態FileReader。這是以下之一：

FileReader.result 只讀文件的內容。該屬性僅在讀取操作完成後才有效，並且數據的格式取決於使用哪種方法來啟動讀取操作。

fileReader的幾個事件處理程序：

1 . FileReader.onbort:在讀取操作中止時觸發。

2 . FileReader.onerror:在讀取操作遇到錯誤時觸發。

3 . FileReader.onload:在讀取操作成功完成時觸發。

4 . FileReader.onloadstart:在開始閱讀時觸發。

5 . FileReader.onloadend:無論是否成功只要讀取操作完成都會觸發。

6 . FileReader.onprogress:閱讀Blob內容時觸發。

FileReader的方法：

1 . FileReader.abort();中止讀取操作

2 . FileReader.readAsArrayBuffer();完成時result屬性包含ArrayBuffer表示文件數據

3 . FileReader.readAsBinaryString();完成時result屬性將包含來自文件的原始二進制數據作為字元串。

4 . FileReader.readAsDataURL();完成時result屬性包含data：表示文本數據的URL；

5 . FileReader.readAsText();完成時result屬性包含文本的內容作為文本字元串。

閱讀全文

熱點內容

內置存儲卡可以拆嗎發布：2025-05-18 04:16:35 瀏覽：333

編譯原理課時設置發布：2025-05-18 04:13:28 瀏覽：376

linux中進入ip地址伺服器發布：2025-05-18 04:11:21 瀏覽：610

java用什麼軟體寫發布：2025-05-18 03:56:19 瀏覽：31

linux配置vim編譯c 發布：2025-05-18 03:55:07 瀏覽：107

砸百鬼腳本發布：2025-05-18 03:53:34 瀏覽：941

安卓手機如何拍視頻和蘋果一樣發布：2025-05-18 03:40:47 瀏覽：739

為什麼安卓手機連不上蘋果7熱點發布：2025-05-18 03:40:13 瀏覽：802

網卡訪問發布：2025-05-18 03:35:04 瀏覽：510

接收和發送伺服器地址發布：2025-05-18 03:33:48 瀏覽：371

js選擇圖片上傳

與js選擇圖片上傳相關的資訊