html   

<div class="ctc_lbs" >

                <div class="error_erbox" style="display:block;" id="contenterror"></div>

                    <div class="int_zhl_box_c">

                    <div class="text_texhong02" style="padding-left:15px;">*</div>

                        <div class="text_tex01">相关截图</div>

                        <a href="javascript:;" class="cjsfz_btn"></a>

                        <input type="text" class="int_box"  id="imgval" name="imgval" value=""  placeholder="请提供截图,图片需小于300K,支持格式JPEG.BMP.PNG" />

                  <div class="ll_img_box"><input hidefocus="true"  id="fileupload" type="file" name="img" onclick="upimg('fileupload','img','errorimg','imgval',this)"></div>

                    </div>

                    <div class="error_erbox" style="display:block;" id="errorimg"> </div>

                    <div class="int_zhl_box_c">

                    <div class="text_texhong02"></div>

                        <div class="text_tex01" style="width:80px"></div>

                        <a href="javascript:;" class="cjsfz_btn"></a>

                        <input type="text" class="int_box" id="imgval1" name="imgval1" value=""  placeholder="请提供截图,图片需小于300K,支持格式JPEG.BMP.PNG"/>

                  <div class="ll_img_box"><input hidefocus="true"  id="fileupload1" type="file" name="img1" onclick="upimg('fileupload1','img1','errorimg1','imgval1',this)"></div>

                    </div>

                    <div class="error_erbox" style="display:block;" id="errorimg1"></div>

                    <div class="int_zhl_box_c">

                    <div class="text_texhong02"></div>

                        <div class="text_tex01" style="width:80px"></div>

                        <a href="javascript:;" class="cjsfz_btn"></a>

                        <input type="text" class="int_box" id="imgval2" name="imgval2" value="" placeholder="请提供截图,图片需小于300K,支持格式JPEG.BMP.PNG"/>

                  <div class="ll_img_box"><input hidefocus="true"  id="fileupload2" type="file" name="img2" onclick="upimg('fileupload2','img2','errorimg2','imgval2',this)"></div>

                    </div>

                    <div class="error_erbox" style="display:block;" id="errorimg2"></div>

                    <div class="tijiaoan_box2"> <a class="int_tijiao2" href="javascript:viewAjax('<?php echo $formthreadsid;  ?>');">提交</a> <a class="int_quxiao" href="javascript:viewsuccessclose();">取消</a> </div>

</div>

 这里有3个上传框  需要用ajax来提交 然后返回已上传的地址到对应的 文本框

 

 

js

 

//ajax 上传图片

function upimg(id,name,sid,imgval,target){

var bar = $('.bar');

var percent = $('.percent');

var progress = $(".progress");

var files = $(".files");

var btn = $(".btn span");

var showimg = $('#'+sid);

var myupload = "myupload"+sid;

var nums = Math.floor(Math.random()*10+1);

if($("#"+myupload).length>0){

}else{

$("#"+id).wrap("<form id='"+myupload+"' action='upload_img.php?name="+name+"' method='post' enctype='multipart/form-data'></form>");

//特别要注意这里  默认change的 时候 会无限吧当前change加到之前的后面 就类似拼数组 

//比如 你点击上传按钮  第一次 会调用 一次上传 同一个上传按钮 点第二次的时候 会吧这个图片上传2次 点3次的时候回上传3次

$("#"+id).unbind("change");

 

$("#"+id).change(function(){

//下面是判断上传图片大小的  做限制

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;       

   var fileSize = 0;    

   if (isIE && !target.files) {    

       var filePath = target.value;    

       var fileSystem = new ActiveXObject("Scripting.FileSystemObject");       

       var file = fileSystem.GetFile (filePath);    

       fileSize = file.Size;   

   } else {   

//     console.dir(target);

//     console.dir(target.files);

       fileSize = target.files[0].size;    

   }  

   var size = fileSize / 1024;   

   if(size>1){ 

       alert( "附件不能大于1M"); return false;

   } 

$("#"+myupload).ajaxSubmit({

dataType:  'json',

beforeSend: function() {

        showimg.empty();

progress.show();

        var percentVal = '0%';

        bar.width(percentVal);

        percent.html(percentVal);

btn.html("上传中...");

    },

    uploadProgress: function(event, position, total, percentComplete) {

        var percentVal = percentComplete + '%';

        bar.width(percentVal);

        percent.html(percentVal);

    },

success: function(data) {

files.html("<b>"+data.name);

var img = data.url;

showimg.html("上传成功 : "+img);

btn.html("添加附件");

$("#"+imgval).val(img);

},

error:function(xhr){

btn.html("上传失败");

bar.width('0');

files.html(xhr.responseText);

}

});

});

}

 

 

 

php  

 

<?php

define('FILE_PATH', 'data');

define('DOMAIN', 'http://www.wulinlw.org/');

 

date_default_timezone_set('PRC');

$name = htmlspecialchars($_GET['name']);

if(!empty($_FILES[$name]["name"]))

//提取文件域内容名称,并判断

$path=FILE_PATH."/".date("Ym");//上传路径

if(!file_exists($path))

{

//检查是否有该文件夹,如果没有就创建,并给予最高权限

if(!@mkdir($path, 0777))

{

echo "创建目录 [".$path."]失败.";

exit;

}

}

$tmpname = $_FILES[$name]['tmp_name'];

$filename = $_FILES[$name]['name'];

$img_info = getimagesize($tmpname);

switch($img_info[2])

{

case 1:

$imgtype = "gif";

break;

case 2:

$imgtype = "jpg";

break;

case 3:

$imgtype = "png";

break;

default:

$imgtype = '';

break;

}

$file_size = filesize($tmpname);

$updoad_img_name = date("YmdHis").uniqid().'.'.$imgtype;

if(move_uploaded_file($tmpname,$path.'/'.$updoad_img_name))

$data = array('url'=>DOMAIN.$path.'/'.$updoad_img_name, 'name'=>$updoad_img_name);

else

$data = array();

echo json_encode($data);

}


详细见附件 可以直接运行

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

附件下载:
upimg.zip 347.41KB

et_highlighter