可预览的多图片上传(不用刷新页面)

一.关于多图片上传

1.用表单提交的方式，<input type="file">和<iframe>可以不用刷新，一次提交一张图片。

2.使用flash插件实现多图片上传。

3.使用html5+ajax可以实现可拖拽的多图片上传。

二.form表单提交方式实现可预览的不用刷新的图片上传

因为以前写过表单提交方式下一张图片上传，在以前的基础上改的多图片上传。

三.html代码

<pre name="code" class="html"><span>图片</span>
        <div id='upload_image_div' style='cursor:default;width:410px;background:#fff;border-style:solid;border-width:5px;border-color:#DEDEDE;position:absolute;top:26px;left:70px;'>
            <div style="background:#f2f2f2;height:35px;font-size:14px;">
                <div style="float:left;font-weight:700;color:#333;padding-left:20px;">本地上传</div>
                <div id="pic_close"  style="float:right;margin-right:20px;" align="center"><a  onClick="delete_image()" style='cursor:pointer;color:#25690c;background-color:#DEDEDE;' οnmοuseοver="this.style.color='#69a155'" οnmοuseοut="this.style.color='#25690c'">×</a></div>            </div>
            <div style="padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;">
                <form name="upload_form" id="upload_form" action="uploadImg.php" method="post" target="upload_frame" enctype="multipart/form-data">                                 <iframe id="upload_frame" name="upload_frame" style="display:none"></iframe>
                   <input id='upload_img_num' name ='upload_img_num'  style="display:none;" type='text' value="" readonly='readonly' unselectable="on"/>                             
                   <div id="upload_img_add" style="">
                       <span id="upload_img_span" style="float:left;display:block;width:82px;height:82px;cursor:pointer;background:url(0.jpg) no-repeat;"> <input type="file" id="upload_img" name="upload_img" style="opacity:0;width:150px;height:82px;" οnchange="upload_image(this.value);" /></span>                   <div id="single_image_div1" style="float:left;margin_right:15px;display:none;width:80px;height:80px;padding:1px 1px;border:1px solid;border-color:gray;">                            <img id='single_image1' style='width:76px;height:76px;' src='' onLoad="$('#single_image_div1').show();">
                       </div>   
                   </div>  
                </form>
            </div>  
        </div>  

注意：form表单一定要加添加 enctype="multipart/form-data"，<iframe>标签，并把form表单的target赋值为<iframe>的name。实现表单提交无页面刷新。action规定当提交表单时向何处提交表单数据，target规定在何处打开action URL。

四 js代码

<script src="../../jscript/jquery-1.8.3.js"></script>
        <script type="text/javascript">
        count=1;
//上传图片
function upload_image(x){   
        if(count<=9){
            $("#upload_img_num").val(count);
            alert(document.getElementById("upload_img_num").value);
            document.upload_form.submit();
            var file = $("#upload_img");
            file.after(file.clone().val("")); 
            file.remove();
            $("#upload_img_span").remove();
            $("#single_image"+count).attr("src","scroll3.gif");
            count++;
            if(count<=9){
                //把”添加图片“作为span的背景图片，span display:block。把<input>设置透明度为0                var inputText="<span id='upload_img_span' style='float:left;display:block;width:82px;height:82px;cursor:pointer;background:url(0.jpg) no-repeat;'> <input type='file' id='upload_img' name='upload_img' style='opacity:0;width:150px;height:82px;' οnchange='upload_image(this.value);'/></span>";
                $("#upload_img_add").append(inputText);
                var imageText="<div id='single_image_div"+count+"' style='float:left;margin_right:15px;display:none;width:80px;height:80px;padding:1px 1px;border:1px solid;border-color:gray;'>"
                imageText=imageText+"<img id='single_image"+count+"' style='width:76px;height:76px;' src='' onLoad='$(\"#single_image_div"+count+"\").show();'>";
                imageText=imageText+"</div>";
                $("#upload_img_add").append(imageText);
            }
        }
}
//删除图片
function delete_image(){
        $("#upload_image_div").css('display','none');
}
//上传文件格式不正确的提示
function error_image(){
        ('#showMessage').show().html('<div align="center"style=" font-size:20px;width:200px;height:100px;background-color:#4c4c4c;"><div style="padding-top:40px;color:#FFFFFF">图片格式不正确</div></div>').fadeOut(2000);
}

只允许上传9张图片。提交一张图片信息和这是第几张图片数据给php页面。提交完数据后删除节点<span><input type="file"/></span>，把图片在single_img_div中预览，并把single_img_div show()出来。如果图片数没有超过9张，则继续动态添加<span><input type="file"/></span>，和<div id="single_img_div"></div>

五php代码

<pre name="code" class="php">if($_FILES["upload_img"] && isset($_POST["upload_img_num"])){
        file_put_contents("/home/zsc.txt","\n shshh:".$file,FILE_APPEND);
    $tp = array("image/gif","image/pjpeg","image/jpeg","image/x-png","image/bmp");
    if(!in_array($_FILES["upload_img"]["type"],$tp)){
        echo "<meta http-equiv='content-type' content='text/html;charset=utf-8' /><script language='javascript' charset='utf-8'>parent.error_image();</script>";
        exit;
    }//END IF 
   $filetype = $_FILES['upload_img']['type'];
    if($filetype == 'image/jpeg'){
        $type = '.jpg';
    }   
    if ($filetype == 'image/jpg') {
        $type = '.jpg';
    }   
    if ($filetype == 'image/pjpeg') {
        $type = '.jpg'; 
    }   
    if($filetype == 'image/gif'){ 
        $type = '.gif'; 
    }   
    if($filetype == 'image/x-png'){ 
        $type = '.png'; 
    }   
    if($filetype == 'image/bmp'){
        $type = '.bmp';
    }   
   if($_FILES["upload_img"]["name"]){
        $file=uploadImg($_FILES["upload_img"]["tmp_name"]);
        $file= str_replace(PHP_EOL, '', $file); 
        file_put_contents("/home/zsc.txt","\n shshh:".$file,FILE_APPEND);
        $upload_img_num=$_POST["upload_img_num"];
        file_put_contents("/home/zsc.txt","\n shshh:".$upload_img_num,FILE_APPEND);
        echo "<script>";
        echo "window.parent.document.getElementById('single_image".$upload_img_num."').src='".$file."';";
        echo "</script>";
        exit;
     }
}

function uploadImg($file){
    $service_port = "4041";
    $address = '10.200.143.194';
    $fp = fsockopen( $address, $service_port);
    if (!$fp) {
        return 0;
    } else {
        $str = "*********";
        $out = file_get_contents($file);
        if($out){
            fwrite($fp, $out);
            fwrite($fp, $str);
        //　echo "上传成功";
        }
        $url=fgets($fp,1000);
        fclose($fp);
    }
    return $url;
}

<pre name="code" class="html">